JQuery Function Loop

Question

I am trying to make it so my websites background changes colour randomly every few seconds. I can get it to change to a random colour but how do I make it loop?

<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>

Alnitak · Accepted Answer · 2013-01-17 21:51:56Z

You can make it loop simply by having the function register itself as its own completion handler:

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);
}

NB: the hue has to be picked inside the function otherwise it'll remain the same colour every time.

Just for fun, you can also make the hue code slightly shorter using some Javascript hacks (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.

Selvakumar Arumugam · Accepted Answer · 2013-01-17 21:43:19Z

3

Try using setInterval. See below,

$(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);
    }   
});

answered Jan 17, 2013 at 21:43

Selvakumar Arumugam

79.9k15 gold badges123 silver badges139 bronze badges

Comments

sdespont · Accepted Answer · 2013-01-17 21:43:20Z

1

Use setInterval function

<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>

answered Jan 17, 2013 at 21:43

sdespont

14.1k9 gold badges61 silver badges99 bronze badges

Collectives™ on Stack Overflow

JQuery Function Loop

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related