Обратный отсчет на сайте своими руками

Создаем новый сайт – интернет-магазин новогодних елок. Клиентом была поставлена задача: сделать в том или ином виде обратный отчет, чтобы посетители сайта видели, сколько осталось времени до нового года.

Было принято решение не связываться с плагинами, а просто написать код, мини программу на JavaScript. И вот, что в результате получилось:

<!-- Блок для отображения таймера -->
<div id="newyear-countdown"                  <!-- это HTML-элемент, в него мы будем «вписывать» текст таймера -->
     style="text-align:center;               /* выравниваем текст по центру */
            font-size:22px;                  /* размер шрифта */
            font-weight:bold;                /* жирный шрифт */
            color:red;                       /* красный цвет текста */
            margin-top:30px;                 /* отступ СВЕРХУ 30px */
            margin-bottom:0;">               /* отступ СНИЗУ 0 — можно менять на свои значения */
</div>                                       <!-- закрываем блок -->

<script>                                     <!-- начинаем блок JavaScript-кода -->
document.addEventListener("DOMContentLoaded", function() {  // ждём, пока страница загрузит HTML; потом запускаем нашу функцию
  // Целевая дата: Новый год
  var targetDate = new Date("Jan 1, 2026 00:00:00").getTime(); // создаём дату "1 янв 2026 00:00:00" и берём время в миллисекундах

  function updateCountdown() {               // объявляем функцию, которая будет пересчитывать и выводить таймер
    var now = new Date().getTime();          // текущее время (в миллисекундах) на компьютере пользователя
    var diff = targetDate - now;             // сколько осталось до цели (разница в миллисекундах)

    var countdownEl = document.getElementById("newyear-countdown"); // находим наш DIV по id, чтобы в него писать текст

    if (diff <= 0) {                         // если время вышло (разница <= 0)
      countdownEl.innerHTML = "🎉 С Новым годом!";  // показываем поздравление
      clearInterval(timer);                  // останавливаем периодический пересчёт
      return;                                // выходим из функции, дальше ничего не считаем
    }

    var days = Math.floor(diff / (1000 * 60 * 60 * 24));            // целые дни до даты (делим миллисекунды на мс в сутках)
    var hours = Math.floor((diff % (1000 * 60 * 60 * 24)) /         // часы: берём остаток от суток и делим на мс в часе
                           (1000 * 60 * 60));
    var minutes = Math.floor((diff % (1000 * 60 * 60)) /            // минуты: остаток от часа делим на мс в минуте
                             (1000 * 60));
    var seconds = Math.floor((diff % (1000 * 60)) / 1000);          // секунды: остаток от минуты делим на мс в секунде

    countdownEl.innerHTML =                                         // собираем строку и вставляем в наш DIV
      "До нового года осталось: " + days + " дн " + hours + " ч " +
      minutes + " м " + seconds + " с";
  }

  updateCountdown();                           // сразу один раз посчитать и показать, не ждём секунду
  var timer = setInterval(updateCountdown, 1000); // запускаем пересчёт каждые 1000 мс (каждую секунду)
});
</script>                                      <!-- конец JavaScript -->

Этот код можно вставить в то место, где вы хотите вывести счетчик обратного отсчета. Например, если в WordPress мы хотим его видеть на самом верху страницы, то его надо разместить в нужном месте в файле header.php