Contador regressivo com JavaScript puro

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