4 minutos de leitura
Autor(a)
Desenvolvedor e instrutor na Alura com foco em JavaScript.
Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.
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.
O JavaScript possui a classe Date que nos permite trabalhar com datas e horários. Se chamarmos o construtor sem parâmetros:
Date
const horas = new Date();
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.
Como Date é um classe, ela possui um método para nos auxiliar a encontrar as horas como o método .getUTCHours()
const hoje = new Date();
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 ?
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
const horas = new Date();
console.log( horas.getHours() );
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.
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.
const conteudo = document.querySelector(".cordefundo");
conteudo.style.background = "#fed02e";
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
const now = new Date;
const tempo = now.getHours();
if( tempo < 16 ) {
const conteudo = document.querySelector(".container");
conteudo.style.background = "#fed02e";
} else {
const conteudo = document.querySelector(".container");
conteudo.style.background = "#1000ff";
}
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)
const horas = new Date(5000000000000);
console.log( horas );
Obtemos como resposta:
2128-06-11T08:53:20.000Z
Passando dia, mês e ano como parâmetro, lembrando que, nessa notação, o mês de janeiro é o 0:
const horas = new Date(2015,10,1);
console.log( horas );
Obtemos como resposta:
2015-11-01T02:00:00.000Z
Passando como parâmetro do construtor uma string:
const horas = new Date("2015/10/1");
console.log( horas );
Obtemos como resposta:
2015-10-01T03:00:00.000Z
É importante conhecer bem as funções básicas do JavaScript, como o replace e outros métodos da String, conversão de String para número e a formação de números em JavaScript.
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.
Avalie este artigo
