Criar um relógio digital que atualiza a cada segundo
Dia 3 do projeto 30 dias com js
Hoje é o terceiro dia do projeto, e o objetivo era criar um relógio digital.
Para isso, assim como nos outros dias, a primeira coisa que fiz foi criar o HTML. Nesse caso, o elemento criado foi um <h1>
com o id="relogio"
.
Com isso, fui direto para o JavaScript. O código ficou assim:
1
2
3
4
5
let relogio = document.getElementById("relogio");
setInterval(() => {
relogio.innerHTML = new Date().toLocaleTimeString();
}, 1000);
Primeiramente, peguei o elemento relogio
do HTML e, em seguida, utilizei a função setInterval()
com um intervalo de 1 segundo. Dentro dela, fiz com que o texto do <h1>
fosse substituído pela hora formatada do dia atual.
Com tudo isso, agora é visível na tela um relógio digital que é atualizado a cada segundo com a hora local.
Se não utilizar o setInterval()
, o relógio não será atualizado automaticamente a cada segundo. Em vez disso, ele dependerá de um recarregamento manual da página para exibir a hora atualizada.
O resultado final você pode conferir aqui
link para o repositorio do projeto