Change site background with script according to time of day

Question

I have this script that changes the background color of the site as the page is updated.

<script>
function random_bg_color() {
    var x = Math.floor(Math.random() * 256);
    var y = Math.floor(Math.random() * 256);
    var z = Math.floor(Math.random() * 256);
    var bgColor = &quot;rgb(&quot; + x + &quot;,&quot; + y + &quot;,&quot; + z + &quot;)&quot;;
 console.log(bgColor);

    document.body.style.background = bgColor;
    }

random_bg_color();
</script> 

It would be possible to modify it to show only specific colors in a given time ?

Example in the morning a lighter color, the afternoon a slightly dark color, and the evening a totally dark color.

Or add an image instead of the color, or 2, when you don’t have a color shows an image.

Answer 1

I’ll show you the basic conditional structure.

var currentTime = new Date().getHours();
if (6 <= currentTime && currentTime < 12) {

    document.body.style.backgroundColor = "blue";

}else if (12 <= currentTime && currentTime < 18) {

    document.body.style.backgroundColor = "red";

}else {

    document.body.style.backgroundColor = "black";

}

As commented by AP

A ideia é escurecer o fundo do site conforme vai passando o dia

just put more else ifs with desired interval of hours.

and as for placing images just observe the syntax at the time above 11 o'clock

        var currentTime = new Date().getHours();
        if (6 <= currentTime && currentTime < 7) {

            document.body.style.backgroundColor = "white";

        }else if (7 <= currentTime && currentTime < 8) {

            document.body.style.backgroundColor = "aliceblue";

        }else if (8 <= currentTime && currentTime < 9) {

            document.body.style.backgroundColor = "#E6E6FA";
            
        }else if (9 <= currentTime && currentTime < 10) {

            document.body.style.backgroundColor = "#E0FFFF";
            
        }else if (10 <= currentTime && currentTime < 11) {

            document.body.style.backgroundColor = "#FFFFF0";
            
        }else if (11 <= currentTime && currentTime < 12) {

            //document.body.style.backgroundColor = "#00FFFF";
            document.body.background = "http://kithomepage.com/images/dia.jpg";
            
          //e assim vai colocando else ifs com intervalo de horas que quiser
            
        }else if (12 <= currentTime && currentTime < 18) {

            //document.body.style.backgroundColor = "#00FFFF"; 
            //document.body.background = "http://kithomepage.com/images/sol-de-mediodia.jpg";

            // se a imagem for menor que a tela, o estilo css é aplicado
            //para que a imagem preencha toda a tela
            document.body.classList.add("planoFundo");
            
        }else {

            //document.body.style.backgroundColor = "black";
            document.body.background = "http://kithomepage.com/images/lua_cristo.jpg";

        }

.planoFundo { 
  background: url(http://kithomepage.com/images/sol-de-mediodia.jpg) no-repeat center center fixed; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}
        		

To add one or more classes to an HTML element, simply select it and call the method classList.add, passing a String as argument. It is interesting to note that we can add multiple classes at once. To do this, enter the names of the classes you want to add separated by a comma. Example: document.body.classList.add( 'class1', 'class2', 'class3' );

Example with random colors during a given period

 var currentTime = new Date().getHours();
var myColors, randomize;

if (6 <= currentTime && currentTime < 12) {

    myColors = ['aliceblue', '#E6E6FA', '#E0FFFF', '#FFFFF0', '#00FFFF'];

}else if (12 <= currentTime && currentTime < 18) {

    myColors = ['maroon', 'yellow', '#008B8B', '#8B008B', '#F0E68C', '#E0FFFF'];

}else {

    myColors = ['black', '#006400', '#4B0082', '#DAA520', '#000080'];

}
randomize = Math.floor(Math.random()*myColors.length);
document.body.style.backgroundColor = myColors[randomize];

console.log(myColors[randomize]);