Como Criar um Contador Regressivo com JavaScript para Eventos e Promoções

Contadores regressivos são muito usados em campanhas promocionais, eventos e lançamentos de produtos. Com poucas linhas de JavaScript é possível criar um contador que atualiza automaticamente dias, horas, minutos e segundos diretamente no navegador.

O Problema

Em campanhas e eventos é comum precisar:

• Exibir um contador regressivo para uma data específica
• Atualizar o tempo restante automaticamente
• Evitar que o contador apareça antes da data definida

Podemos resolver tudo isso apenas com JavaScript utilizando o objeto Date e atualizações periódicas com setInterval().

A Solução

1. Estrutura HTML do contador

    

        Contagem regressiva para a 
        Crazy Sale.
        00 dias |
        00:
        00:
        00
    

2. Estrutura CSS do contador

O contador começa oculto e será exibido automaticamente quando a data de início for atingida.

3. Lógica do contador em JavaScript

// data em que o contador deve aparecer
const dataHoraExibicao = new Date('2026-03-03T08:00:00').getTime();

// data final da campanha
const dataFinal = new Date('2026-03-20T08:00:00').getTime();

function atualizarContador() {

    const agora = new Date().getTime();

    if (agora >= dataHoraExibicao) {

        const contagem = document.getElementById("contagem");
        contagem.style.display = "block";

        const diferenca = dataFinal - agora;

        if (diferenca <= 0) {

            document.getElementById('dias').textContent = '00';
            document.getElementById('horas').textContent = '00';
            document.getElementById('minutos').textContent = '00';
            document.getElementById('segundos').textContent = '00';

        } else {

            const dias = Math.floor(diferenca / (1000 * 60 * 60 * 24));
            const horas = Math.floor((diferenca / (1000 * 60 * 60)) % 24);
            const minutos = Math.floor((diferenca / (1000 * 60)) % 60);
            const segundos = Math.floor((diferenca / 1000) % 60);

            document.getElementById('dias').textContent = formatarTempo(dias);
            document.getElementById('horas').textContent = formatarTempo(horas);
            document.getElementById('minutos').textContent = formatarTempo(minutos);
            document.getElementById('segundos').textContent = formatarTempo(segundos);
        }
    }
}

function formatarTempo(valor) {
    return valor < 10 ? "0" + valor : valor;
}

// executa a cada segundo
setInterval(atualizarContador, 1000);

// executa imediatamente ao carregar
atualizarContador();

Como Funciona

• A variável dataHoraExibicao define quando o contador deve aparecer.
• A variável dataFinal define o fim da campanha.
• A função setInterval() atualiza o contador a cada segundo.
• Os valores são atualizados diretamente nos elementos HTML.

4. Teste o código

Se quiser ver o contador em funcionamento, acesse o exemplo interativo abaixo.
Nele é possível visualizar o HTML, CSS e JavaScript executando em tempo real.

🔗 Executar o exemplo no JSFiddle

Conclusão

Com poucas linhas de JavaScript é possível criar um contador regressivo completo sem depender de backend.

Esse padrão funciona muito bem para:

• Campanhas promocionais
• Landing pages
• Lançamentos de produtos
• Eventos e webinars

Além de simples, a implementação é leve, fácil de reutilizar e pode ser adaptada rapidamente para qualquer projeto web.