Categoría · Secciones Hero Nivel de Dificultad · Intermedio Publicado el · 18 de agosto de 2025

Temporizador de Cuenta Regresiva

Un temporizador de cuenta regresiva para crear una sensación de urgencia para eventos, lanzamientos o promociones.

#countdown #timer #event #launch #promotion

Diseño Responsivo

Sí

Soporte para Modo Oscuro

líneas

Compatibilidad del Navegador

Chrome · Firefox · Safari · Edge

Vista Previa en Vivo

Interactúa con el componente sin salir de la página.

200px

HTML

líneas

CSS

líneas

JavaScript

líneas

                <div class="countdown-container">
  <div id="countdown"></div>
</div>

              

                .countdown-container {
  text-align: center;
  font-size: 2em;
}

              

                document.addEventListener('DOMContentLoaded', () => {
  const countdownElement = document.getElementById('countdown');
  const countDownDate = new Date("Jan 1, 2026 00:00:00").getTime();

  const x = setInterval(() => {
    const now = new Date().getTime();
    const distance = countDownDate - now;

    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);

    countdownElement.innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";

    if (distance < 0) {
      clearInterval(x);
      countdownElement.innerHTML = "EXPIRADO";
    }
  }, 1000);
});

              

Compatibilidad del Navegador

Chrome

≥ 61

Firefox

≥ 60

Safari

≥ 10.1

Edge

≥ 16

Fragmentos de Código Relacionados