De vez em quando precisamos mostrar algum indicador de tempo na tela que precisa atualizar em tempo real. Seja para fazer um relógio, um cronômetro ou uma contagem regressiva, o processo é sempre o mesmo.
Para mostrar data e hora em tempo real em JavaScript você precisa seguir 3 passos:
- Crie um intervalo de tempo com setInterval
- Inicialize ou itere um objeto Date
- Exiba a data formatada na tela ou console
Acompanhe este artigo e descubra como fazer isso detalhadamente.
Como fazer data e hora em tempo real
Para simplesmente saber a data de hoje sem necessidade de uma atualização, o método new Date() já cumpre esse papel muito bem. Mas se você precisa de algo visual que atualiza a cada minuto, segundo ou até mesmo milisegundo, você vai precisar utilizar intervalos em JavaScript.
Segue abaixo um exemplo completo em HTML e JavaScript que mostra a data e hora atuais em tempo real na tela.
<html>
<body>
<div id="data-hora"></div>
<script>
// Função para formatar 1 em 01
const zeroFill = n => {
return ('0' + n).slice(-2);
}
// Cria intervalo
const interval = setInterval(() => {
// Pega o horário atual
const now = new Date();
// Formata a data conforme dd/mm/aaaa hh:ii:ss
const dataHora = zeroFill(now.getUTCDate()) + '/' + zeroFill((now.getMonth() + 1)) + '/' + now.getFullYear() + ' ' + zeroFill(now.getHours()) + ':' + zeroFill(now.getMinutes()) + ':' + zeroFill(now.getSeconds());
// Exibe na tela usando a div#data-hora
document.getElementById('data-hora').innerHTML = dataHora;
}, 1000);
</script>
</body>
</html>
-
Primeiro definimos a função zeroFill para facilitar transformar, por exemplo, 7/4 em 07/04.
-
Depois criamos o intervalo com setInterval. Esse método recebe dois parâmetros, o primeiro é a função que ele vai executar a cada iteração, e o segundo é o número em milisegundos entre um intervalo e outro. Neste caso usamos 1000 que equivale a 1 segundo.
-
Em seguida formatamos a data em uma string legível. Esta é a parte mais complicada, pois precisamos saber usar todos os getters do objeto Date, mas nesse exemplo eu meio que cobri todos os que você vai precisar. Alternativamente você pode usar Date.toLocaleDateString();
-
E por último selecionamos a div #data-hora e alteramos o seu conteúdo.
Se você não quiser mostrar os segundos, pode fazer o setInterval a cada 60000 milisegundos, assim ele vai atualizar a cada minuto e não a cada segundo desnecessariamente.
Horário de Brasília e fuso horários diferentes
Esse tema é opcional, mas necessário em alguns casos, e trabalhar com fuso horários é bastante chato em qualquer linguagem, mas em JavaScript existe ainda um problema adicional.
Como JavaScript é uma linguagem de frontend e é executada no navegador, informações de data e horário dependem do ambiente em que o script está sendo executado. Se o fuso horário for diferente no dispositivo, o script vai mostrar o horário de acordo com o dispositivo.
Então para casos em que a gente deva mostrar, por exemplo, o horário de Brasília, mesmo para uma pessoa acessando de Nova Iorque, precisamos deixar isso explícito, e para isso podemos usar Intl.DateTimeFormat:
const options = {
timeZone: 'America/Sao_Paulo',
hour: 'numeric',
minute: 'numeric'
};
const date = new Intl.DateTimeFormat([], options);
console.log(date.format(new Date()));
Note que usamos como fuso horário "America/Sao_Paulo", pois este é um formato válido. Para outros formatos, verifique qual utilizar: https://momentjs.com/timezone/.
Publicidade
