Cuenta atrás en JavaScript: código paso a paso (2026)

Una cuenta atrás en JavaScript es perfecta para lanzamientos, ofertas o eventos: genera urgencia y queda profesional. Lo mejor es que hoy no necesitas jQuery ni ninguna librería. Con JavaScript puro lo montas en unos minutos, y aquí te dejo el código completo y comentado.

Paso 1: el HTML

Una estructura sencilla con un hueco para cada unidad de tiempo:

<div id="cuenta-atras">
  <div><span id="dias">0</span>días</div>
  <div><span id="horas">0</span>horas</div>
  <div><span id="minutos">0</span>min</div>
  <div><span id="segundos">0</span>seg</div>
</div>

Paso 2: el CSS

Un estilo básico para que se vea como un contador de verdad. Ajústalo a tu marca:

#cuenta-atras {
  display: flex;
  gap: 1rem;
  font-family: system-ui, sans-serif;
  text-align: center;
}
#cuenta-atras div {
  background: #1e1e2f;
  color: #fff;
  padding: 1rem 1.25rem;
  border-radius: .75rem;
  min-width: 4rem;
}
#cuenta-atras span {
  display: block;
  font-size: 2rem;
  font-weight: 700;
}

Paso 3: el JavaScript

Aquí está toda la lógica. Defines la fecha final, calculas cuánto falta cada segundo y actualizas el HTML. Cuando llega a cero, se detiene:

// 1. Fecha y hora final (formato: año-mes-díaThora:min:seg)
const fin = new Date("2026-12-31T23:59:59").getTime();

// 2. Se ejecuta cada segundo
const intervalo = setInterval(() => {
  const ahora = Date.now();
  const restante = fin - ahora;

  // 3. Si ya pasó, paramos
  if (restante <= 0) {
    clearInterval(intervalo);
    document.getElementById("cuenta-atras").textContent = "¡Se acabó!";
    return;
  }

  // 4. Convertimos milisegundos a días, horas, minutos y segundos
  const dia = 1000 * 60 * 60 * 24;
  const dias    = Math.floor(restante / dia);
  const horas   = Math.floor((restante % dia) / (1000 * 60 * 60));
  const minutos = Math.floor((restante % (1000 * 60 * 60)) / (1000 * 60));
  const segundos = Math.floor((restante % (1000 * 60)) / 1000);

  // 5. Lo pintamos en el HTML
  document.getElementById("dias").textContent = dias;
  document.getElementById("horas").textContent = horas;
  document.getElementById("minutos").textContent = minutos;
  document.getElementById("segundos").textContent = segundos;
}, 1000);

Y ya está: un contador funcionando sin una sola librería. Solo tienes que cambiar la fecha de la línea 2 por la tuya.

Tip: si lo usas en WordPress, pega el HTML en un bloque HTML personalizado y carga el CSS y el JS desde tu tema hijo o con un plugin de snippets, no directamente en el editor.

Casos de uso y errores comunes

• Ofertas y rebajas: un contador junto al botón de compra sube la conversión.
• Lanzamientos: crea expectación antes de abrir un producto o curso.
• Eventos y webinars: cuenta atrás hasta la hora de inicio.

El error más típico es la zona horaria: new Date("2026-12-31T23:59:59") usa la hora local del visitante. Si quieres una hora fija igual para todos (por ejemplo, el fin de una oferta), añade la zona en formato ISO, como "2026-12-31T23:59:59+01:00".

¿Y el método antiguo con jQuery?

Durante años se usaba la librería FlipClock con jQuery para conseguir el efecto de reloj con solapas. Hoy no lo recomiendo: jQuery ya no hace falta para esto y FlipClock lleva años sin mantenerse. Si quieres el efecto «flip», se consigue con animaciones CSS sobre el mismo código de arriba, sin dependencias.

Más desarrollo web en el blog

• Microinteracciones web con código.
• Patrones de diseño en JavaScript.
• Cómo hacer una web responsive.
• Todos los artículos de desarrollo web.

Preguntas frecuentes

¿Necesito jQuery para una cuenta atrás?

No. Con JavaScript puro es más ligero y no cargas una librería entera solo para esto. El código de arriba funciona sin dependencias.

¿Cómo pongo la cuenta atrás en WordPress?

Pega el HTML en un bloque HTML personalizado y carga el CSS y el JS desde tu tema hijo o con un plugin de fragmentos de código. Así no se pierde al actualizar.

¿Puedo mostrar solo horas, minutos y segundos?

Sí. Quita el bloque de días del HTML y suma esas horas al cálculo, o simplemente no muestres la variable dias.

Ya tienes tu cuenta atrás lista para copiar y pegar. Si te ha servido, compártela o cuéntame en comentarios para qué la vas a usar.