Question

I am looking to write a script which:

1. Constantly changes the background color every 1 second.
2. When you first access the webpage the starting color is set based on the time of day. So if I access the website at: 7am (or close to that time) everyday it will always be a share of red no matter if I have had my browser open for 10hours.

How could I do this without loads of IF statements?

Looking here: https://stackoverflow.com/a/1455177/560287 it says there are 16776960 different colors, I dont need that many but how could I reduce this into a setInterval so it fades through the colors of a rainbow every second?

Answer 1

This works:

First lets make the function that will do it:

    "use strict";
            function changeColor() {
    //rgb
    console.log('event fired');
    var colors = [0, 0, 0];
    var hour = new Date().getHours();
    console.log(hour);

    //Will get an valid rgb color
    var color = parseInt(255/24*hour);
    console.log(color);
    for(var i = 0; i < colors.length; i++) {
        colors[i] = color;
    }
    //add the color to the element you want:
    document.body.style.backgroundColor = "rgb("+colors[0] + "," + colors[1] + "," + colors[2] + ")";
    console.log("event fired. color get:" + colors[0] + colors[1] + colors[2]);
  }

After, let’s make a event that will be fired in each 30 minutes(the color will be changed every 30 minutes):

setInterval(changeColor,1800000);