Contagem regressiva com HTML e JS

Walter Nascimento
Walter Nascimento | PT-BR
1 min readOct 2, 2020

Contagem regressiva com HTML e JS

[click here for English]

Que tal saber quanto tempo falta para uma data especifica de forma bem simples? quanto tempo falta para seu aniversario ou aquele feriado, veja abaixo como é rápido fazer este projeto.

Código

Primeiro vamos criar a interface, faremos algo simples, utilizando apenas HTML.

Código em HTML

Na estrutura em HTML foi criado um input para receber a data, e ao sair do input o onblur é ativado e chama a função resetCountdown() .

Código em JS

Aqui temos a função countdown() , que é iniciada ao carregar a pagina, e apos ela temos a função resetCountdown() , que é ativada assim que preencher a data e o input perder o foco.

pronto simples assim.

Demo

Veja abaixo o projeto completo funcionando.

Projeto no codepen

Youtube

Se preferi assistir, vejo o desenvolvimento no youtube.

Vídeo no youtube

Obrigado por ler!

Se você tiver alguma dúvida, reclamação ou dica, pode deixar aqui nos comentários. Vou ter o maior prazer em responder!

😊😊 Até mais! 😊😊

--

--