jquery - jQuery 函数循环

Question

我正在努力做到这一点，以便我的网站背景每隔几秒钟随机改变一次颜色。我可以让它变成一个随机的颜色，但我怎么让它循环呢？

<script type="text/javascript">
$(document).ready(function() {

    var hue = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';  

    function colourSet(){
       $("body").animate({ backgroundColor: hue}, 2000);
    }   

    colourSet();

});
</script>

Answer 1

您可以通过让函数将自身注册为自己的完成处理程序来使其循环：

function colourSet() {
   var hue = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')'; 
   $("body").animate({ backgroundColor: hue}, 2000, colourSet);
} 

注意：必须在函数内部选择​​色调，否则每次都会保持相同的颜色。

只是为了好玩，您还可以使用一些 Javascript hack (ahem) 使色调代码稍短一些：

function r() { return ~~(256 * Math.random()) };
function colourSet() {
   var hue = 'rgb(' + [r(), r(), r()] + ')';
   $("body").animate({ backgroundColor: hue}, 2000, colourSet);
}  

which takes advantage of two uses of the bitwise ~ ("not") operator to convert floating point to integer, and also because concatenating an array to a string automatically does a .toString() on the array - resulting in a comma separated list.

Answer 2

尝试使用setInterval. 见下文，

$(document).ready(function() {

    setInterval(function () {
       var hue = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';  
       colourSet(hue);
    }, 30000); //30 seconds

    function colourSet(hue){
       $("body").animate({ backgroundColor: hue}, 2000);
    }   
});

Answer 3

使用setInterval功能

<script type="text/javascript">
$(document).ready(function() {

    setInterval(function(){
        var hue = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';  

        function colourSet(){
           $("body").animate({ backgroundColor: hue}, 2000);
        }   

        colourSet();
    },60000 /* 60 seconds */);
});
</script>