1

Eu possuo esse script que altera a cor dofundo do site conforme a pagina é atualizada.

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

Seria possivel modificar ele para mostra apenas cores especificas em determinado horario ?

Exemplo pela manhã uma cor mais clara, a tarde uma cor um pouco escura, e a noite uma cor totalmente escura.

Ou adicionar uma imagem no lugar da cor, ou os 2, quando não tiver uma cor mostra uma imagem.

1 Resposta 1

6

Vou mostrar a estrutura condicional básica.

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

}

Conforme comentário do AP

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

basta colocar mais else ifs com intervalo de horas desejados.

e quanto a colocar imagens basta observar a sintaxe no horário acima de 11 horas

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

Para adicionar uma ou mais classes em um elemento HTML, basta selecioná-lo e chamar o método classList.add, passando uma String como argumento. É interessante notar que podemos adicionar múltiplas classes de uma só vez. Para isso, informe os nomes das classes que deseja adicionar separados por vírgula. Exemplo: document.body.classList.add( 'class1', 'class2', 'class3' );

Exemplo com cores aleatórias durante determinado período

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

4
  • Muito bom, teria como adicionar uma imagem, como o por do sol ao cair da tarde?
    – Endou
    4/01/2019 às 11:28
  • A ideia é escurecer o fundo do site conforme vai passando o dia.
    – Endou
    4/01/2019 às 12:04
  • @Endou, editei a resposta. Se resolveu seu problema marque-a como aceita.
    – user60252
    4/01/2019 às 13:33
  • Desculpe, adorei sua resposta, vou começar a fazer uns teste. obrigado
    – Endou
    7/01/2019 às 23:53

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .