Как сделать так, чтобы когда урок начинался (наступало 8:00), то выводилось "Урок начался!", а когда заканчивался (8:40) - "Урок закончился!"

Question

Как сделать так, чтобы когда урок начинался (наступало 8:00), то выводилось "Урок идёт!" ('Going'), а когда заканчивался (наступало 8:40) - "Урок закончился!" ('Completed'). Когда начинался второй урок (наступало 8:50), выводилось также, как в первом случае, но уже у первого урока была надпись "Завершён!"?

Надеюсь, понятно написал, если что спрашивайте в комментариях!

Есть графический пример, как должно быть:

<div id="time"></div>
<p class="p"></p>
<p class="two" style="color: red;">Upcoming</p>

 let clock = document.getElementById("time")

var time = setInterval(function() {
  var date = new Date();
  clock.innerHTML = (date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds());
}, 1000);


let p = document.querySelector('.p')
let two = document.querySelector('.two')
let date = new Date

setInterval(() => {
    
    if(date.getHours() == 8 && date.getMinutes() >= 0 && date.getMinutes() <= 10){
        p.textContent = "Going"
    }

    if(date.getHours() == 8 && date.getMinutes() >= 0 && date.getMinutes() >= 40){
        p.textContent = "Completed"
    }
  
}, 0);

setInterval(() => {
    
    if(date.getHours() >= 8 && date.getMinutes() >= 0 && date.getMinutes() <= 50){
        two.textContent = "Going"
    }

    if(date.getHours() == 9 && date.getMinutes() >= 0 && date.getMinutes() >= 30){
        two.textContent = "Completed"
    }
  
}, 0);

Answer 1

Я бы сделал таким образом, функция TimeCalc() каждый раз проходит по блокам, получая блок с временем, формата hh:mm - hh:mm, разбирая его и сравнивая с текущем временем.

Сравнение банальное:
Если текущее время >= началу урока и текущее время <= концу урока - урок идёт;
Если текущее < начала и конца урока - урок ещё не начинался;
Если текущее > начала и конца - урок закончился.

Чтобы манипулировать цветами блока "статуса", я использовать data-атрибуты, куда подставляю значение и через CSS выдаю им определённые стили.

Каждые 15 секунд (последняя строчка) функция будет обновлять данные.

const items = document.querySelectorAll('.items .item');

function TimeCalc() {
  const curTime = new Date().getTime();

  items.forEach(function(item) {
    const elStatus = item.querySelector('.item-status');
    const elTime = item.querySelector('.item-time');
    
    let time = elTime.textContent.trim().split(/\s*-\s*/g);
    
    let start = time[0].split(':');
    let end = time[1].split(':');
    
    start = new Date().setHours(start[0], start[1], 0);
    end = new Date().setHours(end[0], end[1], 0);
    
    if(curTime >= start && curTime <= end) {
      elStatus.dataset.status = '2';
      elStatus.textContent = 'идёт';
    } else if(curTime > start && curTime > end) {
      elStatus.dataset.status = '1';
      elStatus.textContent = 'завершенный';
    } else if(curTime < start && curTime < end) {
      elStatus.dataset.status = '3';
      elStatus.textContent = 'приближающийся';
    }
  })
}

TimeCalc();
setInterval(TimeCalc, 15000);

h2 {
  font-size: 100%;
}

.item-status[data-status="1"] {color: green;}
.item-status[data-status="2"] {color: orange;}
.item-status[data-status="3"] {color: red;}

<div class="items">
  <div class="item">
    <h2>Название урока</h2>
    <div>
      <span class="item-status"></span>
      <span class="item-time">8:00 - 8:40</span>
    </div>
  </div>

  <div class="item">
    <h2>Название урока</h2>
    <div>
      <span class="item-status"></span>
      <span class="item-time">8:50 - 9:30</span>
    </div>
  </div>
  
  <div class="item">
    <h2>Название урока</h2>
    <div>
      <span class="item-status"></span>
      <span class="item-time">15:00 - 15:40</span>
    </div>
  </div>

</div>

БЛОГ НА HUSL

Как сделать так, чтобы когда урок начинался (наступало 8:00), то выводилось "Урок начался!", а когда заканчивался (8:40) - "Урок закончился!"

Ответы (1 шт):