Как вставить день и время сразу в нескольких ссылках?

Рейтинг: 1Ответов: 1Опубликовано: 17.04.2023

на странице есть несколько ссылок, как правильно в каждую ссылку вставить день недели и время, если названия классов разные, а также сделать обновление раз в минуту, при наступлении новой минуты, в 00сек?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      #data {
        font: 40px serif;
        color: hsl(120, 100%, 30%);
      }
      .colon {
        color: hsl(120, 100%, 40%);
        line-height: 10px;
        padding: 0 3px;
        display: inline-block;
        position: relative;
        bottom: 5px;
      }
    </style>
  </head>
  <body>
    <a><span>nik-1</span> <span class="day_0"></span></a><br />
    <a><span>nik-2</span> <span class="day_1"></span></a><br />
    <a><span>nik-3</span> <span class="day_2"></span></a><br />
    <a><span>nik-4</span> <span class="day_3"></span></a><br />
    <a><span>nik-5</span> <span class="day_4"></span></a><br />
    <a><span>nik-6</span> <span class="day_5"></span></a><br />
    <a><span>nik-7</span> <span class="day_6"></span></a>
    <script>
      function two_digit(n) {
        var str = "";
        if (n <= 9) str = "0";
        str = str + n;
        return str;
      }

      function sad() {
        var s = new Date();

        var days = ["Вс", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб"];
        var hours = two_digit(s.getHours());
        var min = two_digit(s.getMinutes());
        var sec = two_digit(s.getSeconds());

        return days[s.getDay()] + ", " + hours + ":" + min + ":" + sec;
      }

      function clock_min() {
        setInterval(function () {
          document.querySelectorAll(
            ".day_0",
            ".day_1",
            ".day_2",
            ".day_3",
            ".day_4",
            ".day_5",
            ".day_6"
          ).innerHTML = sad();
        }, 60000);
      }
      clock();
    </script>
  </body>
</html>
javascript
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Для представленной разметки и классов с таким набором имён хорошо подойдёт селектор по атрибуту:

const LINKS = document.querySelectorAll('[class^="day_"');

function two_digit(n) {
  return ("" + n).padStart(2, "0");
}

function sad() {
  let s = new Date();

  let days = ["Вс", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб"];
  let hours = two_digit(s.getHours());
  let min = two_digit(s.getMinutes());
  let sec = two_digit(s.getSeconds());

  LINKS.forEach((el) => {
    el.textContent = days[s.getDay()] + ", " + hours + ":" + min + ":" + sec;
  });
}

function clock_min() {
  setInterval(sad, 1000); // <-- Измените на нужный интервал
}

clock_min();
<a><span>nik-1</span> <span class="day_0"></span></a><br>
<a><span>nik-2</span> <span class="day_1"></span></a><br>
<a><span>nik-3</span> <span class="day_2"></span></a><br>
<a><span>nik-4</span> <span class="day_3"></span></a><br>
<a><span>nik-5</span> <span class="day_4"></span></a><br>
<a><span>nik-6</span> <span class="day_5"></span></a><br>
<a><span>nik-7</span> <span class="day_6"></span></a>

Это может не сработать, если предполагается добавлять непосредственно этим элементам дополнительные классы (например, для стилизации). Тогда рекомендую создать для элементов data-атрибуты и выбирать по ним.

если изменить интервал обновления на (60*1000), то обновлять будет ровно через минуту, тоесть постоянно будут отображаться секунды момента загрузки страницы, а надо как то определить сколько времени осталось до наступления новой минуты, и после этого обновлять раз в минуту, при загрузке стр чтобы отобразилось чч:мм:32, первое обновление через 28с и потом через 60с постоянно...

const LINKS = document.querySelectorAll('[class^="day_"');

function two_digit(n) {
  return ("" + n).padStart(2, "0");
}

function sad() {
  let s = new Date();
  let days = ["Вс", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб"];
  let hours = s.getHours();
  let min = s.getMinutes();
  let sec = s.getSeconds();
  
  setTimeout(sad, (60 - sec) * 1000);
  
  LINKS.forEach((el) => {
    el.textContent = `${days[s.getDay()]}, ${two_digit(hours)}:${two_digit(min)}:${two_digit(sec)}`;
  });
}

sad();
<a><span>nik-1</span> <span class="day_0"></span></a><br>
<a><span>nik-2</span> <span class="day_1"></span></a><br>
<a><span>nik-3</span> <span class="day_2"></span></a><br>
<a><span>nik-4</span> <span class="day_3"></span></a><br>
<a><span>nik-5</span> <span class="day_4"></span></a><br>
<a><span>nik-6</span> <span class="day_5"></span></a><br>
<a><span>nik-7</span> <span class="day_6"></span></a>