как менять цвет элемента по времени?

Question

как менять цвет элемента по времени?

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

есть такой скрипт

<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>
    const LINKS = document.querySelectorAll('[class^="day_"');
    function two_digit(n) {
      return ("" + n).padStart(2, "0");
    }
    function sad() {
      var s = new Date();
      var days = ["Вс", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб"];
      var hours = s.getHours();
      var min = s.getMinutes();
      var 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();
  </script>
</body>
</html>

надо определить сколько времени (минут) прошло с начала дня недели, для спана с классом day_0 с воскресенья , day_1 с понедельника, day_2 с вторника, day_3 с среды, day_4 с четверга, day_5 с пятницы, day_6 с субботы, что-то типа

// объект Date
const d = new Date();
 
// индекс дня недели, часы, минуты 
let day = d.getDay();
let hour = d.getHours();
let min = d.getMinutes();
 
// количество прошедших дней с начала понедельника, ДО текущих суток
let beforeDay = day ? day - 1 : 6;
 
// количество прошедших минут с начала понедельника, ДО текущих суток
let beforeMin = beforeDay * 24 * 60;
 
// количество прошедших минут текущих суток
let thisMin = hour * 60 + min;
 
// количество прошедших минут с начала понедельника, до текущий минуты сегодняшнего дня
let fullMin = beforeMin + thisMin;
 
console.log(fullMin);

и потом каждому спану присвоить присвоить цвет, в зависимости сколько минут прошло

что-то типа этого

if (m >= 0 && m < 1440) ("#0f0"); // применить этот цвет в течении этого отрезка времени
if (m >= 1440 && m < 5510) ("#f00"); // применить этот цвет в течении этого отрезка времени
if (m >= 5510 && m < 5755) ("#00f"); // применить этот цвет в течении этого отрезка времени
if (m >= 5755 && m < 10080) ("#ff0"); // применить этот цвет в течении этого отрезка времени

javascript

Источник: Stack Overflow на русском

как менять цвет элемента по времени?

Ответы