Neste artigo você vai aprender a como criar um contador regressivo com JavaScript, sem utilizar qualquer biblioteca externa
Conteúdo disponível em vídeo também:
Fala programador(a), beleza? Bora aprender a criar um contador regressivo, utilizando apenas Vanilla JavaScript!
A ideia aqui é ter o tempo que o usuário precisa para criar a regressão, ou seja, precisamos ter uma entrada de dados do tempo que o relógio vai regredir
E ainda será necessário um elemento HTML para exibir o timer
Então vamos ao exemplo prático:
<div id="timer"></div>
Este será o nosso HTML, onde o timer será exibido
Agora vamos ao código JavaScript:
function startTimer(duration, display) { var timer = duration, minutes, seconds; setInterval(function () { minutes = parseInt(timer / 60, 10); seconds = parseInt(timer % 60, 10); minutes = minutes < 10 ? "0" + minutes : minutes; seconds = seconds < 10 ? "0" + seconds : seconds; display.textContent = minutes + ":" + seconds; if (--timer < 0) { timer = duration; } }, 1000); } window.onload = function () { var duration = 60 * 5; // Converter para segundos display = document.querySelector('#timer'); // selecionando o timer startTimer(duration, display); // iniciando o timer };
Primeiro temos a função, que será explicada em breve
Abaixo da função temos uma outra que é inicializada quando a página é carregada, você pode alterar este evento
E ainda definimos qual é o tempo que terá no contador pela variável duration, minutos convertidos em segundos
Depois selecionamos o elemento para exibir o timer e inicializamos a função do relógio JavaScript
Na função é criada uma formatação de mm:ss, ou seja minutos e segundos como um relógio digital
A cada um segundo, por meio do setInterval, o tempo vai baixando em uma unidade nos segundos, como o funcionamento do relógio
Seguindo assim até o tempo ser finalizado
Todo o resultado é replicado na div #timer, que selecionamos como elemento que vai exibir o relógio
Conclusão
Neste artigo vimos como criar um contador regressivo com JavaScript puro
Utilizamos a função setInterval para subtrair os segundos e reapresentar o valor certo para o usuário na tela
O elemento e a duração foram previamente definidos, inclusive o tempo pode ser inserido via input pelo usuário, o que seria o ideal
Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube
Show de bola cara!!
Valeuuu!
Muito bom ! Valeu
que bom que te ajudei =))
Como fazer para não recomeçar ao atualizar a página? Ou seja, o regressivo continua até zerar, mesmo no refresh
display.textContent = minutes + “:” + seconds;
if (—timer < 0) {
timer = duration;
timer = “”;
}
}, 1000);
boa noite.
poderia mandar o codigo para estudo?
joseapbezerrade@gmail.com
Excelente, Serviu perfeitamente para o que precisava. Valeu!
uma duvida
como faço para redirecionar caso o tempo acabe?
Parabens pelo post