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

Вступление

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

Практически в каждом продающем лендинге используется таймер обратного отсчёта, информирующий о сроке окончания некой акции. С помощью этой статьи вы разберётесь, как сверстать такой таймер и как работает скрипт, обеспечивающий отсчёт в обратную сторону до конца суток. Собственно, именно поэтому он и называется «таймер обратного отсчёта». Естественно, код мы будем писать на чистом JavaScript.

HTML разметка таймера обратного отсчёта.

Сама вёрстка очень простая и не требует особых комментариев:

Пара комментариев к представленной HTML вёрстке:
В блоке <div class="timer"><div> c помощью немаркированного списка <UL> выводится сам таймер обратного отсчёта, отсчитывающий часы, минуты и секунды.
С помощью списка <ul class="flex time-name"></ul> выводятся названия элементов таймера.

Таблица стилей для таймера обратного отсчёта

Более подробно рассматривать вёрстку и таблицу стилей мы не будем, т. к. наша основная задача — изучить работу js-скрипта, обеспечивающего работу таймера обратного отсчёта.
Одно маленькое дополнение. С помощью стиля .timer li + li:before выводится двоеточие, разделяющее между собой часы, минуты и секунды.

JavaScript управления таймером обратного отсчёта.

Для ограничения области видимости, разместим скрипт в анонимной самозапускающейся функции.

Объявим несколько переменных и присвоим им значения:

Показания таймера формируются функцией timer, аргументом которой является массив times.
Работа функции timer основана на внутреннем таймере-планировщике setInterval, запускающим код пересчёта показаний таймера обратного отсчёта один раз в секунду. На экран значения выводятся с помощью функции showTimer, аргументами которой являются часы, минуты и секунды, полученные в результате работы timer.

Итак, запускаем таймер обратного отсчёта:

Код функции timer:

И, наконец, код функции, отображающей текущее значение таймера на экране. Аргументами этой функции буду вычисленные значения часов, минут и секунд:

Вот и весь код таймера обратного отсчёта. Как видите, абсолютно ничего сложного здесь нет, как и нет необходимости в подключении библиотеки jQuery для его реализации.

Комментарии

Всего: 1 комменатрий
Требования при посте комментариев:
  1. Комментарии должны содержать вопросы и дополнения по статье, ответы на вопросы других пользователей.
    Комментарии содержащие обсуждение политики, будут безжалостно удаляться.
  2. Для удобства чтения Вашего кода, не забываейте его форматировать. Вы его можете подсветить код с помощью тега <pre>:
    <pre class="lang:xhtml"> - HTML;
    <pre class="lang:css"> - CSS;
    <pre class="lang:javascript"> - JavaScript.
  3. Если что-то не понятно в статье, постарайтесь указать более конкретно, что именно не понятно.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *