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

Se liga num detalhe do código acima: quando o tempo chega no zero, ele volta pro início e recomeça sozinho

�isso é ótimo pra um cronômetro que fica rodando, mas na maioria dos casos você quer que ele PARE e dispare alguma ação (mostrar ‘Tempo esgotado’, liberar um botão, e por aí vai)

Pra isso a gente guarda o retorno do setInterval numa variável e usa o clearInterval pra travar o relógio

Bloco de código mostrando: guardar ‘var meuTimer = setInterval(…)’ e, dentro do if de tempo negativo, trocar o reset por ‘clearInterval(meuTimer); display.textContent = "Tempo esgotado";’

Depois explica em uma linha que o clearInterval recebe o id do intervalo e mata a repetição

O contador acima regride uma duração fixa em mm:ss

Mas tem um caso super comum: contar quanto falta pra uma DATA (uma promoção, um evento, a virada do ano)

Aqui a lógica muda um pouco: em vez de subtrair segundos, a gente pega a diferença entre a data alvo e o agora, e quebra em dias, horas, minutos e segundos

Bloco de código com: definir a data alvo via ‘new Date("2026-12-31T23:59:59").getTime()’, dentro do setInterval calcular ‘var distancia = alvo – new Date().getTime()’, e converter com Math.floor pra dias (distancia / (10006060*24)), horas, minutos e segundos usando o resto (%)

Mostra também exibir o resultado na div e usar clearInterval quando a distancia ficar negativa, trocando o texto por ‘Encerrado’

Explica em linhas curtas o porquê de cada divisão, no mesmo ritmo didático do resto do post

Três perguntas curtas e respondidas em 1 a 2 linhas cada:

H3 ‘Como deixar o usuário digitar o tempo do contador?’ com resposta explicando trocar o valor fixo de duration pelo value de um input, convertendo pra número com parseInt

H3 ‘Dá pra fazer contador regressivo sem biblioteca?’ respondendo que sim, tudo aqui é Vanilla JavaScript, só setInterval e manipulação do DOM, sem nada externo

H3 ‘Como mostrar horas além de minutos e segundos?’ explicando dividir o total por 3600 pras horas e usar o resto pros minutos e segundos, no mesmo esquema do mm:ss