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

Таймери зворотного відліку зазвичай використовуються на веб-сайтах, що рекламують товари, послуги або спеціальні пропозиції. Ви часто можете побачити їх на цільових сторінках або в інтернет-магазинах, де вони використовуються для виділення обмежених за часом пропозицій та створення відчуття терміновості. Показуючи, скільки часу залишилося до певної події або терміну, такі таймери можуть допомогти підвищити залученість користувачів та заохотити їх до швидшого прийняття рішень.

В одній з попередніх статей ми розглянули, як створити простий годинник на JavaScript. У цьому прикладі ми зробимо крок далі та створимо більш практичне рішення — таймер зворотного відліку, який відображає час, що залишився до запланованої дати. Таймер показуватиме дні, години, хвилини та секунди, динамічно оновлюючись у режимі реального часу.

Робота з таймерами зворотного відліку — це гарний спосіб краще зрозуміти, як працює об’єкт Date на JavaScript, зокрема як обчислювати різницю в часі та форматувати значення для відображення. Він також знайомить із поширеними завданнями фронтенду, такими як оновлення інтерфейсу користувача через регулярні проміжки часу та обробка граничних випадків, коли зворотний відлік досягає нуля.

У цьому прикладі ми реалізуємо таймер зворотного відліку, використовуючи простий 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)