Отсчёт до праздника

Урок 12.7 · Интерфейсы и сайты с нуля · Модуль 12. Праздник на экране · По подписке

Цель урока: Посчитать, сколько осталось до даты, показать это в понятном виде и обновлять раз в секунду, не забыв остановить таймер.

Нужно знать заранее: Уроки 4.2 и 12.1

Объяснение

Зачем это нужно: Отсчёт «до праздника», «до конца акции», «доставка через 2 дня 04:12:07» — самый частый блок с датой в интерфейсах. И самый частый источник мелких ошибок: то время уходит в минус, то «1 день» написано как «1 дней», то таймер продолжает тикать, когда блок уже удалён со страницы. Здесь впервые появляются дата, разница между датами и таймер — три вещи, без которых не обходится ни один интерфейс со временем.

Как это работает: Дата в JavaScript — это число миллисекунд, прошедших с 1 января 1970 года. Date.now() возвращает «сейчас» таким числом, а new Date('2027-01-01T00:00:00') создаёт дату праздника. Разница двух чисел — сколько миллисекунд осталось. Дальше раскладываем остатками: секунды — делим на 1000; дни — Math.floor(всего / 86400); часы — Math.floor((всего % 86400) / 3600); минуты — Math.floor((всего % 3600) / 60); секунды — всего % 60. Остаток (%) — это «что осталось после целых суток». Двузначный вид: padStart(2, '0') дописывает ноль слева, поэтому 4 часа выглядят как 04. Без этого «3 дня 4:12:7» читается как ошибка. Таймер: setInterval(render, 1000) вызывает функцию раз в секунду, clearInterval(timer) останавливает. Без остановки таймер продолжает работать, даже когда блок уже не нужен, — это утечка. Форма слова считается: 1 день, 2 дня, 5 дней. Иначе в интерфейсе появляется «1 дней», и сразу видно, что блок собрали наспех.

Уроки модуля 12

• 12.1 Подарок, который просит нажать (бесплатно)
• 12.2 Колесо, которое крутится и останавливается (по подписке)
• 12.3 Мемори: найди пару (по подписке)
• 12.4 Хлопушка: конфетти из ничего (по подписке)
• 12.5 Проект: ловец подарков (по подписке)
• 12.6 Тайный Санта: жеребьёвка без повторов (по подписке)
• 12.7 Отсчёт до праздника — вы здесь (по подписке)