Показать сообщение отдельно
  #1 (permalink)  
Старый 06.12.2022, 18:05
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

Скрипт обратного отсчета
Есть скрипт обратного отчета

Как можно сделать так что бы было возможность поставить на одну страницы разные даты (любое количество)

<!doctype html>
<html lang="ru">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <style>
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    @media (prefers-reduced-motion: no-preference) {
      :root {
        scroll-behavior: smooth;
      }
    }

    body {
      margin: 0;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.5;
      color: #212529;
      background-color: #fff;
      -webkit-text-size-adjust: 100%;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      display: flex;
      justify-content: center;
    }

    .timer__items {
      display: flex;
      font-size: 48px;
    }

    .timer__item {
      position: relative;
      min-width: 60px;
      margin-left: 10px;
      margin-right: 10px;
      padding-bottom: 15px;
      text-align: center;
    }

    .timer__item::before {
      content: attr(data-title);
      display: block;
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
      font-size: 14px;
    }

    .timer__item:not(:last-child)::after {
      content: ':';
      position: absolute;
      right: -15px;
    }
  </style>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      // конечная дата
      const deadline = new Date(2023, 00, 01);
      // id таймера
      let timerId = null;
      // склонение числительных
      function declensionNum(num, words) {
        return words[(num % 100 > 4 && num % 100 < 20) ? 2 : [2, 0, 1, 1, 1, 2][(num % 10 < 5) ? num % 10 : 5]];
      }
      // вычисляем разницу дат и устанавливаем оставшееся времени в качестве содержимого элементов
      function countdownTimer() {
        const diff = deadline - new Date();
        if (diff <= 0) {
          clearInterval(timerId);
        }
        const days = diff > 0 ? Math.floor(diff / 1000 / 60 / 60 / 24) : 0;

        $days.textContent = days < 10 ? '0' + days : days;

        $days.dataset.title = declensionNum(days, ['день', 'дня', 'дней']);

      }
      // получаем элементы, содержащие компоненты даты
      const $days = document.querySelector('.timer__days');

      // вызываем функцию countdownTimer
      countdownTimer();
      // вызываем функцию countdownTimer каждую секунду
      timerId = setInterval(countdownTimer, 1000);
    });
  </script>
</head>

<body>
До нового года
  <div class="timer">
    <div class="timer__items">
      <div class="timer__item timer__days">00</div> 
    </div>
  </div>
До Родества 
  <div class="timer">
    <div class="timer__items">
      <div class="timer__item timer__days">00</div> 
    </div>
  </div>
До старого нового года 
  <div class="timer">
    <div class="timer__items">
      <div class="timer__item timer__days">00</div> 
    </div>
  </div>

</body>

</html>
Ответить с цитированием