Temporizador de cuenta regresiva en JavaScript

A menudo, en los sitios que venden algo, se puede encontrar un temporizador de cuenta regresiva hasta una fecha determinada. Este tipo de script suele ser necesario para páginas de destino o tiendas en línea. En uno de los artículos anteriores, analizamos la creación de un reloj simple en JavaScript. Ahora consideraremos un ejemplo un poco más complejo pero al mismo tiempo más práctico de trabajo con el objeto Date. Escribamos un temporizador de cuenta regresiva en JavaScript sin usar bibliotecas de terceros.

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)