Contagem regressiva

by Tiago Agostinho

HTML

<section id="contagem" style="display:none;">
    <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>

CSS

#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);
        }

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();