Форум

Сергей Ракипов · #1 (**permalink**) 06.12.2022, 18:05

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

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

<!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>

рони · #2 (**permalink**) 06.12.2022, 19:18

Сергей Ракипов,

<!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() {
            let divs = document.querySelectorAll('[data-end]');
            // склонение числительных
            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() {
                divs.forEach(div => {
                    let deadline = new Date(div.dataset.end);
                    const diff = deadline - new Date();
                    const days = diff > 0 ? Math.ceil(diff / 1000 / 60 / 60 / 24) : 0;
                    div.textContent = days < 10 ? '0' + days : days;
                    div.dataset.title = declensionNum(days, ['день', 'дня', 'дней']);
                })
                setTimeout(countdownTimer, 1000)
            }
            // вызываем функцию countdownTimer
            countdownTimer();
        });
    </script>
</head>
<body>
    До нового года
    <div class="timer">
        <div class="timer__items">
            <div class="timer__item timer__days" data-end="1/1/2023">00</div>
        </div>
    </div>
    До Рождества
    <div class="timer">
        <div class="timer__items">
            <div class="timer__item timer__days" data-end="1/7/2023">00</div>
        </div>
    </div>
    До старого нового года
    <div class="timer">
        <div class="timer__items">
            <div class="timer__item timer__days" data-end="1/14/2023">00</div>
        </div>
    </div>
</body>
</html>

Сергей Ракипов · #3 (**permalink**) 06.12.2022, 19:54

рони,
Спасибо друг

Сергей Ракипов · #4 (**permalink**) 06.12.2022, 19:56

я понял отслеживать события с помощью атрибутов

Сергей Ракипов · #5 (**permalink**) 31.12.2022, 08:55

Скажите а JS способен ли находить к примеру каждый второй и четвертый четверг месяца или первое или последнее воскресение месяца.

рони · #6 (**permalink**) 31.12.2022, 09:00

Сергей Ракипов,
да)))

Сергей Ракипов · #7 (**permalink**) 31.12.2022, 09:29

рони,

function getTuesdays(month, year) {
    var d = new Date(year, month, 1),
        tuesdays = [];

    d.setDate(d.getDate() + (9 - d.getDay()) % 7)
    while (d.getMonth() === month) {
        tuesdays.push(new Date(d.getTime()));
        d.setDate(d.getDate() + 7);
    }

    return tuesdays;
}

var meetingTuesdays = [],
    ul = document.getElementById("list"),
    temp,
    li,
    i;

for ( i = 0; i < 12; i += 1) {
    temp = getTuesdays(i, 2023);
    meetingTuesdays.push(temp[1]);
    li = document.createElement("li");
    li.textContent = temp[1];
    ul.appendChild(li);

    meetingTuesdays.push(temp[3]);
    li = document.createElement("li");
    li.textContent = temp[3];
    ul.appendChild(li);
}

console.log(meetingTuesdays);
    </script>

Я нашел как находить сейчас попробую сделать как выводить

рони · #8 (**permalink**) 31.12.2022, 10:42

Сергей Ракипов,
получение даты последней пятницы текущего месяца

Форум

Справочник

Discord чат

Курсы javascript