Uma floricultura me pediu pra criar uma funcionalidade em que a cor de fundo do site mudasse de acordo com as horas do dia. Vamos ver como podemos encontrar as horas do dia e alterar o CSS tudo isso usando JavaScript.
Trabalhando com datas e horas
O JavaScript possui a classe Date que nos permite trabalhar com datas e horários. Se chamarmos o construtor sem parâmetros:
Autor(a)
Felipe Nascimento
Desenvolvedor e instrutor na Alura com foco em JavaScript.
Inscreva-se em nossa Newsletter
Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.
Date
const horas = newDate();
console.log( horas );
Conseguimos obter a data e o horário atual:
Thu Nov 01 2018 13:51:03 GMT-0300 (Brasília Standard Time)
Ótimo, resolvemos uma pequena parte do problema que era descobrir como pegar a data e hora, agora vamos tentar ser mais específico e encontrar somentes as horas do dia.
Encontrando as horas
Como Date é um classe, ela possui um método para nos auxiliar a encontrar as horas como o método .getUTCHours()
const hoje = newDate();
console.log( hoje.getUTCHours() );
Conseguimos ser bem específicos e encontrar as somente as horas, o problema foi que o número que tivemos de retorno foi 15 e no dia em eu rodei esse código eram exatas 13:00 horas, logo o retorno deveria ter sido 13 e não 15. O que ocorreu ?
Resolvendo o problema das horas
Conseguimos pegar a hora do dia, mas ela está vindo errada!. O problema da hora encontrada não ser a hora real aconteceu por que o método getUTCHours()está trazendo a hora UTC (Tempo Universal Coordenado) Para resolver essa situação vamos utilizar o método getHours da classe Date
Ambos os métodos trazem apenas as horas, a diferença é que getHours() retorna o horário local.
No momento em que eu rodei o script a hora retornada foi 13 , Uma parte do problema foi resolvido, agora vamos ver como alterar a cor do fundo do site usando JavaScript.
Alterando as cores de acordo com as horas
Atualmente a cor de fundo do site é amarelo, o que eu quero é deixar ele azul a partir das 16:00. Com o JavaScript nós conseguimos alterar a cor do fundo da página utilizando os seletores CSS.
Agora que já sabemos como pegar a hora do dia, e como alterar a cor de fundo de uma página, vamos criar um script com a ajuda do if para fazer a mudança de horário
Além de invocar o construtor sem parâmetro, existem outras maneiras para encontrar data e hora usando o objeto Date
Passando o valor da data em milisegundos. De acordo com a documentação do developer mozilla, a data do JavaScript é baseada no valor de tempo em milissegundos desde a meia noite de 01 de Janeiro de 1970, UTC.
Com um dia correspondendo a 86.400,000 milissegundos.( essa parte é do texto da mozilla)
Se ficou interessado em como o Javascript funciona e como você pode utilizá-lo melhor, aqui na Alura temos uma formação front-end. Nela, você verá como programar em Javascript, utilizar expressões regulares, entre outras coisas.
