Change site background with script according to day time

Question

Change site background with script according to day time

Navigation

#1 by (6 votes)

1

I have this script that changes the color of the website as the page refreshes.

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

Would it be possible to modify it to show only specific colors at a given time?

Example in the morning a lighter color, a later color a little dark, and the night a completely dark color.

Or add an image in place of the color, or the 2, when it does not have a color it shows an image.

javascript css script background

asked by anonymous 04.01.2019 / 01:21

1 answer

How to change the type of text in a list with JQuery? Always output the same in C

score 6 · Accepted Answer

I'll show 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";

}

According to AP's comment

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

Just put more else ifs with desired number of hours.

And when it comes to putting images, you just have to look at the syntax in the hour 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 classList.add , passing a String as an argument. It's 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]);