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

Question

[id_nomer_odin1]

Как сделать так, чтобы когда урок начинался (наступало 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);

Comments

[Noder SS]

Что именно не получается?

Answer 1

[ksnk]

В отличии от предложенных решений,

• можно указывать время с точностью до секунды, вдруг это кому то надо.
  
• используется один таймаут, а не посекундный опрос, что уменьшает нагрузку на броузер
  
• таймер срабатывает предварительно за минуту до срока, чтобы компенсировать задержку таймаута броузером.
  
  

Answer 2

[Илья]

Для таких целей в браузерах есть консоль разработчика, где сразу пишет, что не объявлена переменная date.
А вообще вы объявляете переменную date через let. Так что ваша переменная не попадает в цикл (читайте справку зачем используют let)
Пробуйте так:

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')
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);

И убирайте масло масляное, на подобии этого:

if(date.getHours() == 9 && date.getMinutes() >= 0 && date.getMinutes() >= 30){

А вот тут можно использовать let:

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

Comments

[AUser0]

Илья, давайте быть последовательными.
Если date не попадёт "в цикл", а точнее - в анонимную функцию, то и переменные p и two - ТОЖЕ не попадут в анонимную функцию, и ТОЖЕ работать в ней - не будут.

[Илья]

AUser0, Естественно, я оставил зацепочку, что бы человек подумал

[id_nomer_odin1]

Илья, Спасибо конечно, но всё равно не получается :(

[AUser0]

id_nomer_odin1, ну да, потому что должно быть так:

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

setInterval(() => {
    
    if((date.getHours() == 8 && date.getMinutes() >= 50) || (date.getHours() == 9 && date.getMinutes() <= 30)){
        two.textContent = "Going"
    }
    else if(date.getHours() >= 9){
        two.textContent = "Completed"
    }
  
}, 200);

Хотя удобнее работать с диапазонами времени, такой функционал в JS есть.

[Илья]

id_nomer_odin1,

var clock = document.getElementById("time")

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


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

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

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

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

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

Answer 3

[Сергей Соколов]

Не очень удачно, что таймеры часто обновляют содержание страницы, по сути ничего не меняя – текст остаётся тот же большую часть срабатываний.

Один вариант — использовать Shadow DOM, можно с React или Vue – те берут на себя задачу обновления реальной DOM только фактически изменившимися участками. Но освоение нового инструмента займёт какое-то время.

Другой вариант – использовать события. Что-то меняется только когда впервые наступает момет «Че». Например, время 08:40. В этот момент можно выбросить событие. Считайте, что «Событие» == «Звонок».
Слушать это событие будет каждый компонент урока. И менять своё состояние, если время – его.

Как я понимаю, там ещё обычные часы должны тикать. Вот в них же можно отслеживать моменты, когда из 08:39 стало 08:40 – предыдущее значение ещё-не, а текущее уже-да. Вот тогда и выбрасывать событие.

У компонента урока может быть одно из трёх состояний: "Upcoming", "Ongoing", "Completed". В обработчике события можно принимать решение, какое из трёх переключиться, исходя из времени события и собственных отметок времени начала и конца.

Answer 4

[Сергей Сергей]

Есть пути к оптимизации, но и так сойдёт для такого количества.