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

HTML

CSS

JavaScript

HTML5

CSS3

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

Matheus

Curtidas 0

Melhor post

Yuri Aguiar

Yuri Aguiar

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
GOSTEI 3
POSTAR