Таймер зворотного відліку на JavaScript

Часто на сайтах, де щось продають, можна зустріти таймер зворотного відліку до певної дати. Зазвичай такий скрипт потрібен для лендінгів або інтернет-магазинів. В одній із попередніх статей ми розглянули створення простого годинника на JavaScript. Зараз розглянемо трохи складніший, але в той же час більш практичний приклад роботи з об’єктом Date. Напишемо таймер зворотного відліку на JavaScript без використання сторонніх бібліотек.

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>

HTML-код може бути іншим, все залежить від вашої задачі. Приклад із мінімальними стилями CSS того, як працює таймер зворотного відліку, можна побачити на Codepen: https ://codepen.io/igorrybalko/pen/zxOdPvZ

Нагадаю, що місяці в JavaScript починаються з нуля.

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