Post

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

Esta postagem está licenciada sob CC BY 4.0 pelo autor.