Простой таймер обратного отчёта на JavaScript

Привет! Сегодня мы рассмотрим создание простого таймера обратного отчёта на JavaScript. Данный счётчик, будет отсчитывать время до указанного числа. Для создания такого таймера вам нужны знания в HTML, CSS, JavaScript и немного PHP если вы планируете добавлять информацию о дате из БД.

Код счётчика был написан не мной, я только немного отредактировал его под себя. К сожалению я не помню, сайт на котором я его нашёл. Если ты являешься автором, то напиши мне и я укажу ссылку на оригинал.

HTML

Главный элемент #countdown, в него записываем блоки для указания чисел даты. Атрибуты типа data, которые я создал для главного контейнера, я использую для передачи в них даты из админки.

<div id="countdown" class="countdown" data-day="22" data-month="12" data-year="2021">
        <div class="countdown-number">
            <span class="days countdown-time"></span>
            <span class="countdown-text">Дней</span>
        </div>
        <div class="dotBlockTimer">:</div>
        <div class="countdown-number">
            <span class="hours countdown-time"></span>
            <span class="countdown-text">Часов</span>
        </div>
        <div class="dotBlockTimer">:</div>
        <div class="countdown-number">
            <span class="minutes countdown-time"></span>
            <span class="countdown-text">Минут</span>
        </div>
        <div class="dotBlockTimer">:</div>
        <div class="countdown-number">
            <span class="seconds countdown-time"></span>
            <span class="countdown-text">Секунд</span>
        </div>
</div>

CSS

#countdown {
    display: flex;
    column-gap: 10px;
    bottom: 0;
    right: 0;
    margin: 20px;
    align-items: center;
    justify-content: center;
}
.countdown-title {
    color: #396;
    font-weight: 100;
    font-size: 40px;
    margin: 40px 0px 20px;
}
.countdown {
    font-family: sans-serif;
    color: #fff;
    display: inline-block;
    font-weight: 100;
    text-align: center;
    font-size: 30px;
}
.countdown-number {
    width: 80px;
    padding: 10px;
    border-radius: 10px;
    background: rgba(0,0,0,0.5);
    display: inline-block;
    width: 80px;
    border: 1px solid #fff;
}
.countdown-time {
    padding: 0;
    display: inline-block;
    font-size: 40px;
}
.countdown-text {
    display: block;
    padding-top: 5px;
    font-size: 13px;
}

JavaScript

В JavaScript создаём 2 функции. Первая, функция getTimeRemaining высчитывает разницу между текущей датой и конечной, после чего собирает объект из элементов даты.

Вторая - initializeClock, распределяем полученные данные по соответствующим элементам счётчика.

/* функция которая собирает массив из значений даты */
function getTimeRemaining(endtime) {
    var t = Date.parse(endtime) - Date.parse(new Date());
    var seconds = Math.floor((t / 1000) % 60);
    var minutes = Math.floor((t / 1000 / 60) % 60);
    var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
    var days = Math.floor(t / (1000 * 60 * 60 * 24));
    return {
        'total': t,
        'days': days,
        'hours': hours,
        'minutes': minutes,
        'seconds': seconds
    };
}

/* добавляет в соответствующие элементы значения даты */
function initializeClock(id, endtime) {
    var clock = document.getElementById(id);
    var daysSpan = clock.querySelector('.days');
    var hoursSpan = clock.querySelector('.hours');
    var minutesSpan = clock.querySelector('.minutes');
    var secondsSpan = clock.querySelector('.seconds');
    
    function updateClock() {
        var t = getTimeRemaining(endtime);
    
        daysSpan.innerHTML = t.days;
        hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
        minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
        secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
    
        if (t.total <= 0) {
        clearInterval(timeinterval);
        }
    }
    
    updateClock();
    var timeinterval = setInterval(updateClock, 1000);
}

/* получение данных о времени */
let day = document.querySelector("#countdown").getAttribute("data-day")
let month = document.querySelector("#countdown").getAttribute("data-month")
let year = document.querySelector("#countdown").getAttribute("data-year")



let  deadline = new Date(Date.parse(new Date(year, month, day, 0, 0, 0, 0))); 

initializeClock('countdown', deadline);