Возможности:
фон видео
Выбор даты с Date()
Рассчитать время
setInterval() для времени обновления
Выберите только дату в будущем или сегодня
Локальное хранилище при обновлении страницы
КОД Гитхаб
Есть и другие демонстрационные примеры обратного отсчета:
Первый - с jQurey, а также с фиксированной настройкой времени. Второй - тоже Javascript, но напрямую введите время обратного отсчета.
часы обратного отсчета с jQuery
Обратный отсчет с использованием JavaScript
HTML
видео вставка
overlay — белый фон с непрозрачностью
Контейнер ввода — это раздел ввода по умолчанию с формой.
После отправки ввода отображается обратный отсчет.
Когда время достигает 0, это означает, что текущее время равно выбранному времени. Информация выходит. И он также может начать новый обратный отсчет до раздела по умолчанию.
CSS
базовая настройка шрифта из шрифтов Google
фоновое видео и оверлей по центру и скрыты.
container — это фоновый раздел while, в котором будут отображаться три разных элемента div. И все по центру.
Внутри контейнера форма с двумя входными частями.
Кнопка выравнивается и меняет яркость фона при наведении.
Раздел обратного отсчета должен располагаться в строке.
Полный раздел представляет собой анимированный заголовок.
Для адаптивной настройки экрана.
ЯВАСКРИПТ
Выберите DOM и глобальные настройки
расстояние - это время обратного отсчета со вторым блоком.
Время обратного отсчета будет отображаться в разделе обратного отсчета, обновляемом каждую секунду.
Когда расстояние достигает 0, он должен перейти к полному разделу.
Мы не можем выбрать предыдущее время, так как это демонстрация обратного отсчета.
установите для атрибута значение dateElement.
сохранить данные обратного отсчета в локальном хранилище и преобразовать их из объектов в строки.
Если в локальном хранилище нет данных, необходимо выбрать дату.
После завершения обратного отсчета и сброса его следует вернуть в раздел inputciontainer по умолчанию, остановить интервал и очистить данные локального хранилища.
Когда в локальном хранилище есть данные, возьмите данные из него и преобразуйте их в объекты, чтобы их можно было назначать элементам.
Добавьте eventlinstener к трем кнопкам.
И запустите restorePrivousCountdown(), чтобы проверить, есть ли данные внутри.
