Como mudar a cor de uma div dependendo do dia e hor�rio?

22/08/2021

Boa tarde! N�o sei se ficou claro, mas vou tentar explicar. Estou fazendo um site sobre um restaurante, ele abre Quartas e S�bados das 19hs at� as 22hs.
Gostaria que, quando o restaurante estiver fechado a div ficasse vermelha e nos dias que estiver aberto fique em verde.
E como deixar isso programado para acontecer sempre nesses dias e hor�rios?

N�o sei como fazer e preciso de uma luz! Grato!

C�digo:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>
<style>

    body, html {
        width: 100;
        height: 100vh;
        justify-content: space-around;
        align-items: center;
        display: flex;
    }

    #online {
        width: 20px;
        height: 20px;
        background: red;
        border-radius: 50%;
        animation: abertoAnim .5s infinite alternate;
    }


    @keyframes abertoAnim {
        from {
            transform: scale(1);
        }

        to {
            transform: scale(.7);
        }
    }

</style>

<body>
    <div id="online"></div>
</body>

</html>

Matheus

Curtir t�pico + 0

Responder

Post mais votado

25/08/2021

Fala comigo meu querido, tudo bem?

� bem simples, basta voc� inserir um script que ele faz isso pra voc� numa boa.

No JavaScript temos o m�todo getDay() que te retorna o dia da semana de acordo com a hora local, onde 0 representa o Domingo, o 1 representa a Segunda e assim vai. Seguindo essa l�gica Quarta seria 3, certo ? E S�bado seria 6... basta implementar uma l�gica dentro de um if por exemplo...

//array pra exemplo
var semana = ["Domingo", "Segunda-Feira", "Ter�a-Feira", "Quarta-Feira", "Quinta-Feira", "Sexta-Feira", "S�bado"];

//cria um objeto do tipo data
var date = new Date();
//captura o dia da semana e armazena em uma vari�vel
diaDaSemana = semana[date.getDay()];

//condi��o para alterar a cor dos elementos
if(diaDaSemana == semana[0] || diaDaSemana == semana[3]){
   document.AQUI_VEM_O_ELEMENTO.style.background = 'COR_QUE_DESEJA';
}else{
   document.AQUI_VEM_O_ELEMENTO.style.background = 'COR_QUE_DESEJA';
}

Seria legal se desse uma olhada no material de Js:
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Date/getDay
Mas ainda sim recomendo que aqui na DevMedia, pois a explica��o � muito mais clara e simples pra entender.
Espero que tenha te ajudado e que rode kkkk qualquer coisa estamos ai meu bom. Abra�os

Yuri Aguiar

Responder

Gostei + 3