Как узнать сколько осталось до конца урока? Ссылаясь на текущее время?

Question

[id_nomer_odin1]

Нужно узнать через сколько закончится урок.

Например:

Сейчас время: 10:20 Урок заканчивается: в 11:10

Как узнать сколько осталось?

<p id="clock"></p>

let date = new Date(),
         hours = (date.getHours() < 10) ? '0' + date.getHours() : date.getHours(),
         minutes = (date.getMinutes() < 10) ? '0' + date.getMinutes() : date.getMinutes(),
         seconds = (date.getSeconds() < 10) ? '0' + date.getSeconds() : date.getSeconds();
  document.getElementById('clock').innerHTML = hours + ':' + minutes;

let dat = hours + ':' + minutes
let time = '10:20'

alert(dat-time)

Comments

[Вадим]

Ну, логично предположить, что
1) нужно иметь 2 даты.
2) Одну с будущим временем - конец урока.
3) Вторую с текущим.
4) Отнять от большей даты меньшую (конец урока минус текущая)
5) И привести полученное число в миллисекундах к необходимому формату.

У Вас в коде нет такой логики. Есть просто вывод времени в элемент.

Возникает вопрос. Где Ваша попытка?

P.s. погуглите про String.prototype.padStart

Answer 1

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

Объекту Date назначить часы и минуты окончания урока. Секунды установить в ноль.
Другой объект Date оставить как есть, на «сейчас».
Объекты Date можно вычитать – получится разница между двумя датами в миллисекундах. Для секунд разделить на 1000.

const secondsTill = timeString => {
  const [hours, minutes] = timeString.split(':');
  const now = new Date();
  const end = new Date();
  end.setHours(hours);
  end.setMinutes(minutes);
  end.setSeconds(0);
  return Math.floor((end - now) / 1000);
}

const endOfClass = '11:20';
alert(`До конца урока в ${endOfClass} осталось ${secondsTill(endOfClass)} секунд`);

Comments

[id_nomer_odin1]

А как вывести в минутах, а не в секундах? При делении на 60, начинает выводить с некрасивым остатком

[Владимир Коротенко]

id_nomer_odin1, есть библиотека momentjs она все это содержит суммы разницы и красивый вывод

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

id_nomer_odin1, Math.floor() округлит. Чтобы вернуть минуты,
return Math.floor((end - now) / (60 * 1000));тогда и функцию стоит переименовать в minutesTill()

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

Владимир Коротенко, рекомендация библиотеки никак не отноится к моему ответу – а только к самому вопросу. Поэтому комментарию тут не место.

[Владимир Коротенко]

Сергей Соколов, вполне подойдёт и toFixed(0)

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

Владимир Коротенко, можно и короче: | 0

13 / 3 | 0 // 4

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

Владимир Коротенко, но там переводится в 32-битное целое, поэтому ограничение до 2 млрд. — < 2 147 483 648

Для миллисекунд в рамках одних суток вполне годится. Но вообще надо не забывать.

[id_nomer_odin1]

а как тогда сделать так, чтобы при разном времени, переменная endOfClass менялась?
Например:
Когда время 10:20 - переменная endOfClass равна 11:10
Когда время 12:30 - переменная endOfClass равна 13:00

И когда уже вышеперечисленный список закончился, выводилась надпись о том, что "Всё закончилось!"

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

id_nomer_odin1, зависит от того, как вы храните расписание – времена начала и конца каждого из уроков.