Итак, чтобы реализовать данный обратный таймер нам понадобится следующий 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();

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

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