Счетчик обратного отсчета на JS

07.10.2017

Часто на сайтах которые что-то продают можно встретить таймер обратного отсчета до определенной даты. Такой скрипт обычно требуется для лендингов и интернет-магазинов.

Для работы скрипта необходимо подключение jQuery

JavaScript выглядет так:

(function () {

    var finishDate = new Date(2017, 8, 30); //подставляем финальную дату
    var compareDate = finishDate.getTime();

    var timer = setInterval(function () {
        timeBetweenDates(compareDate);
    }, 1000);

    function timeBetweenDates(toDate) {

        var difference = toDate - Date.now();

        if (difference <= 0) { //если дата прошла, то таймер останавливаем

            clearInterval(timer);

        } else {

            var seconds = Math.floor(difference / 1000);
            var minutes = Math.floor(seconds / 60);
            var hours = Math.floor(minutes / 60);
            var 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;

            $(".days").text(days);
            $(".hours").text(hours);
            $(".minutes").text(minutes);
            $(".seconds").text(seconds);
        }
    }
})();

Пример HTML


<div class="timer">
    <div class="timer-el">
        <div class="days num"></div>
        <div class="timer-el_name">
            Дней
        </div>
    </div>
    <div class="timer-el">
        <div class="hours num"></div>
        <div class="timer-el_name">
            Часов
        </div>
    </div>
    <div class="timer-el">
        <div class="minutes num"></div>
        <div class="timer-el_name">
            Минут
        </div>
    </div>
    <div class="timer-el">
        <div class="seconds num"></div>
        <div class="timer-el_name">Секунд</div>
    </div>
</div>

Напомню что отсчет месяцев в JavaScript начинается с нуля 0. То есть:

//30 декабря 2017 года
new Date(2017, 11, 30)

Leave a Reply

*

code