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

<section id="contagem">
    <div class="contagem-regressiva">
        Contagem regressiva para a 
        <span class="campanha">Crazy Sale.</span>
        <span id="dias">00</span> dias |
        <span id="horas">00</span>:
        <span id="minutos">00</span>:
        <span id="segundos">00</span>
    </div>
</section>

2. Estrutura CSS do contador

<style>
#contagem{
    display:none;
    background: linear-gradient(135deg,#6f42c1,#4a2ea8);
    padding:20px;
    border-radius:10px;
    text-align:center;
    margin:20px 0;
    color:#fff;
    font-family: Arial, Helvetica, sans-serif;
    box-shadow:0 10px 25px rgba(0,0,0,0.2);
}
 
#contagem .contagem-regressiva{
    font-size:18px;
    font-weight:500;
}
 
#contagem .campanha{
    font-weight:bold;
    color:#ffd54f;
}
 
#contagem span[id]{
    display:inline-block;
    background:#ffffff;
    color:#333;
    padding:8px 12px;
    margin:0 3px;
    border-radius:6px;
    font-weight:bold;
    font-size:20px;
    min-width:40px;
    box-shadow:0 3px 8px rgba(0,0,0,0.15);
}
</style>

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.