StillMaster » Веб разработка » CSS » Как сделать таймер обратного отсчета на сайте DLE

Как сделать таймер обратного отсчета на сайте DLE
Как сделать таймер обратного отсчета на сайте DLE

При разработке шаблона для одного из сайтов на движке DLE была необходимость сделать таймер обратного отсчета сколько осталось времени до выхода  фильма как я это сделал в статье ниже.

Итак, чтобы реализовать данный обратный таймер нам понадобится следующий HTML код.

 <div class="datav">
 	<div class="datavinfo">
     <span class="headerdata">Когда выйдет фильм?</span>
        <p>Премьера фильма Дедпул 3
        состоится - <b><span id="date"></span></b>
        </p>
     </div>
     <div class="datavtimer">
         <div id="timer">
        <div>
            <span id="days">--</span> <span id="daysText"></span>
        </div>
        <div>
            <span id="hours">--</span> <span id="hoursText"></span>
        </div>
        <div>
            <span id="minutes">--</span> <span id="minutesText"></span>
        </div>
        <div>
            <span id="seconds">--</span> <span id="secondsText"></span>
        </div>
    </div>
     </div>

</div>

Я указал полностью код блока который я использовал на сайте. Для таймера нужна лишь тот который обернут в блок datavtimer.

Также необходим следующий CSS код:

.datav {
  position: relative;
  width: 100%;
        height: 140px;
  background-image: linear-gradient(125deg, #141718 50%, #222224 50%);
}

.datavinfo,
.datavtimer {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
}

.datavtimer {
  left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.datavinfo {display: flex;
    
    padding: 15px;flex-direction: column;
    justify-content: center;}
.headerdata {font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    color: chartreuse;}
.datavinfo p {    max-width: 270px;}
#timer {    display: flex;
    column-gap: 15px;
    color: #f9f4f4;
    font-size: 24px;
    padding: 22px;
    font-weight: 600;}
#timer > div {    display: flex;
    flex-direction: column;
    align-items: center;
}
#days {    color: #488f02;}
#daysText, #hoursText, #minutesText, #secondsText {font-size:14px}

Ну и наконец самое важное это скрипт который и создает этот таймер

 window.onload = function() {
      const date_string = "[xfvalue_datav]";
      const date_object = new Date(date_string);
      const options = { day: 'numeric', month: 'long', year: 'numeric' };
      const formatted_date = date_object.toLocaleDateString("ru-RU", options);

      document.getElementById("date").innerHTML = formatted_date;
      document.getElementById("date2").innerHTML = formatted_date;
    };
      
   function countdown() {
            const targetDate = new Date('[xfvalue_datav]'); // Укажите вашу целевую дату (год, месяц, день)

            const now = new Date().getTime();
            const difference = targetDate - now;

            if (difference > 0) {
                const seconds = Math.floor((difference / 1000) % 60).toString().padStart(2, '0');
                const minutes = Math.floor((difference / 1000 / 60) % 60).toString().padStart(2, '0');
                const hours = Math.floor((difference / (1000 * 60 * 60)) % 24).toString().padStart(2, '0');
                const days = Math.floor(difference / (1000 * 60 * 60 * 24));

                // Определение склонения для дней
                const daysText = getDeclension(days, ['день', 'дня', 'дней']);

                // Определение склонения для часов
                const hoursText = getDeclension(hours, ['час', 'часа', 'часов']);

                // Определение склонения для минут
                const minutesText = getDeclension(minutes, ['минута', 'минуты', 'минут']);

                // Определение склонения для секунд
                const secondsText = getDeclension(seconds, ['секунда', 'секунды', 'секунд']);

                document.getElementById('days').textContent = days;
                document.getElementById('hours').textContent = hours;
                document.getElementById('minutes').textContent = minutes;
                document.getElementById('seconds').textContent = seconds;

                document.getElementById('daysText').textContent = daysText;
                document.getElementById('hoursText').textContent = hoursText;
                document.getElementById('minutesText').textContent = minutesText;
                document.getElementById('secondsText').textContent = secondsText;

                setTimeout(countdown, 1000);
            } else {
                // Если дата уже прошла, скрываем таймер.
                document.getElementById('timer').style.display = 'none';
            }
        }

        // Функция определения правильного склонения для числительных
        function getDeclension(number, titles) {
            const cases = [2, 0, 1, 1, 1, 2];
            return titles[(number % 100 > 4 && number % 100 < 20) ? 2 : cases[(number % 10 < 5) ? number % 10 : 5]];
        }

        countdown();

Ну и вот так в итоге выглядит готовый таймер обратного отсчета

Когда выйдет фильм?

Премьера фильма «Дедпул 3» состоится -

--
--
--
--

GeekBrains

Если вам была полезна данная статья, то поделитесь данной статьей в социальной сети. А если вам нужна помощь в настройке сайта, нужна верстка или что то еще то жду Вас на kwork .


Поделиться:

62 23.02.24