@id_nomer_odin1

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

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

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

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

62fad10020013075543190.png

<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);
  • Вопрос задан
  • 200 просмотров
Решения вопроса 1
@ksnk

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

Ответ написан
Пригласить эксперта
Ответы на вопрос 4
gzhegow
@gzhegow
aka "ОбнимиБизнесмена"
А шо не так, все прально напЫсано. Только интервалы почему-то нулевые, отрабатывают либо никогда либо каждый кадр...
Ответ написан
Rimush
@Rimush
Для таких целей в браузерах есть консоль разработчика, где сразу пишет, что не объявлена переменная 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);
Ответ написан
sergiks
@sergiks Куратор тега JavaScript
♬♬
Не очень удачно, что таймеры часто обновляют содержание страницы, по сути ничего не меняя – текст остаётся тот же большую часть срабатываний.

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

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

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

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

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

Вопрос закрыт для ответов и комментариев

Потому что уже есть похожий вопрос.
Похожие вопросы