Веб-Острова Анатолия Куликова

Таймер обратного отсчета

Таймер обратного отсчета

В жизни каждого из нас настаёт момент, когда нужно сделать на сайте таймер обратного отсчёта. Без пафоса, без заморочек — просто табло, которое будет отсчитывать время до X.

Наш таймер обратного отсчета будет простым — без круговых визуализаций, без скевоморфизмных перелистывающихся циферок. Просто цифры с подписями и всё. Мы не станем сильно заморачиваться и строить свой велосипед, а возьмём готовое решение и немного его изменим.

Для начала создадим разметку таймера:

У нас имеется основной блок, в котором содержатся 4 фигуры — по количеству элементов отсчёта. Внутри каждой фигуры — элемент <span> с обязательным классом, в который скрипт на основании указанного класса будет вставлять нужное значение, и стандартный элемент для фигуры — <figcaption>, в котором мы подписываем, что это за значение.

Теперь скрипт — он просто стандартно вставляется на страницу, не требуя подключения дополнительных библиотек типа  jQuery. Я его привожу сразу с тегами, чтобы было удобнее копипастить:

Из всех его строчек нам важна только одна — значение переменной deadline, для которой мы устанавливаем дату, до которой скрипту нужно считать. Время необходимо указывать в международном стандарте ISO 8601. В нашем примере я установил дату наступления 1 января 2019 года — она записана в виде 2019-01-01T00:00:00, где сначала мы указываем год, затем месяц и день, после ставим латинскую T и устанавливаем час:минуту:секунду.

Осталось только навести красоты с помощью стилей.

Вот и всё. Пользуйтесь на здоровье.

Анатолий Куликов

Анатолий Куликов

Автор блога, дизайнер, веб-разработчик

Новые статьи

Разбираемся с Яндекс.Коннектом

Разбираемся с Яндекс.Коннектом

Разбираемся с новым сервисом от Яндекса
Делаем паттерн из иконок

Делаем паттерн из иконок

Ещё один простой, но полезный онлайн-генератор
Следим за клавиатурой с помощью JS

Следим за клавиатурой с помощью JS

Отслеживаем нажатие клавиш на клавиатуре и совершаем действия
Надежность пароля в картинках

Надежность пароля в картинках

Скажи пользователю, что ты думаешь о его пароле
Скроллинг по странице

Скроллинг по странице

Делаем плавный скроллинг по странице с помощью JQuery и HTML5
AI композитор Amper Music

AI композитор Amper Music

Проблем с музыкой для своих проектов больше не будет

Статьи по теме

AI композитор Amper Music

AI композитор Amper Music

Проблем с музыкой для своих проектов больше не будет
Качаем шрифты с Google Fonts

Качаем шрифты с Google Fonts

Скачать шрифты Google Fonts бесплатно, без смс, для своего сайта
Красивый адрес для YouTube-канала

Красивый адрес для YouTube-канала

Создаём красивый адрес для канала и разбираемся, если ничего не получается
Модальное окно на чистом CSS

Модальное окно на чистом CSS

Создаем модальное окно на чистом CSS без использования javascript
Надежность пароля в картинках

Надежность пароля в картинках

Скажи пользователю, что ты думаешь о его пароле
Определяем устройство с помощью PHP

Определяем устройство с помощью PHP

Библиотека для определения устройства пользователя