Temporizador de cuenta regresiva en JavaScript

Los temporizadores de cuenta regresiva se utilizan comúnmente en sitios web que promocionan productos, servicios u ofertas especiales. Es frecuente verlos en páginas de destino o en tiendas en línea, donde se usan para destacar ofertas por tiempo limitado y crear una sensación de urgencia. Al mostrar cuánto tiempo falta para un evento o fecha límite específica, estos temporizadores pueden ayudar a aumentar la interacción del usuario y fomentar una toma de decisiones más rápida.

En uno de los artículos anteriores, vimos cómo crear un reloj simple en JavaScript. En este ejemplo, daremos un paso más y crearemos una solución más práctica: un temporizador de cuenta regresiva que muestra el tiempo restante hasta una fecha programada. El temporizador mostrará días, horas, minutos y segundos, actualizándose dinámicamente en tiempo real.

Trabajar con temporizadores de cuenta regresiva es una buena manera de comprender mejor cómo funciona el objeto Date en JavaScript, incluyendo cómo calcular las diferencias de tiempo y formatear los valores para su visualización. También introduce tareas comunes de frontend, como actualizar la interfaz de usuario a intervalos regulares y gestionar casos excepcionales cuando la cuenta regresiva llega a cero.

En este ejemplo, implementaremos un temporizador de cuenta regresiva usando JavaScript puro, sin depender de bibliotecas de terceros. Este enfoque mantiene la solución ligera y facilita su personalización e integración en diferentes tipos de proyectos.

JavaScript

(() => {
    // set the final date "December 30, 2028 18:30"
    const compareDate = new Date(2028, 11, 30, 18, 30).getTime();

    const timer = setInterval(() => {
        timeBetweenDates(compareDate);
    }, 1000);

    function timeBetweenDates(toDate) {

        const difference = toDate - Date.now();

        // if the date has passed, the timer stops
        if (difference <= 0) {

            clearInterval(timer);

        } else {

            let seconds = Math.floor(difference / 1000),
                minutes = Math.floor(seconds / 60),
                hours = Math.floor(minutes / 60),
                days = Math.floor(hours / 24);

            hours %= 24;
            minutes %= 60;
            seconds %= 60;

            if (days < 10) days = '0' + days;
            if (hours < 10) hours = '0' + hours;
            if (minutes < 10) minutes = '0' + minutes;
            if (seconds < 10) seconds = '0' + seconds;

            document.getElementById('days').innerHTML = days;
            document.getElementById('hours').innerHTML = hours;
            document.getElementById('minutes').innerHTML = minutes;
            document.getElementById('seconds').innerHTML = seconds;

        }
    }
})();

HTML

<div class="timer">
    <div class="timer-el">
        <div class="timer-el__name">Days</div>
        <div id="days"></div>
    </div>
    <div class="timer-el">
        <div class="timer-el__name">Hours</div>
        <div id="hours"></div>
    </div>
    <div class="timer-el">
        <div class="timer-el__name">Minutes</div>
        <div id="minutes"></div>
    </div>
    <div class="timer-el">
        <div class="timer-el__name">Seconds</div>
        <div id="seconds"></div>
    </div>
</div>

El código HTML puede ser otro, todo depende de tu tarea. En Codepen se puede ver un ejemplo con estilos CSS mínimos de cómo funciona el temporizador de cuenta regresiva: https://codepen.io/igorrybalko/pen/zxOdPvZ

Permítanme recordarles que los meses en JavaScript comienzan desde cero.

// December 30, 2027
new Date(2027, 11, 30)