Для создания какой-либо информационной страницы полезной деталью будет таймер обратного отсчета. В данном уроке мы рассмотрим как это можно сделать средствами jquery для вывода таймера обратного отсчета. Он будет выводить количество оставшихся дней, часов, минут и секунд до определенного момента. Анимированное обновление счетчика совершается каждую секунду. Основными его преимуществом является полная реализация на CSS без изображений. Увеличение или уменьшение размера шрифта позволяет выделить нужные единицы времени.

И так, плагин имеет имя “countdown”. Вызванный для пустого элемента, плагин будет заполнять его кодом HTML, необходимым для формирования дисплея таймера. Больше не надо ничего делать, только выбрать нужный элемент, в котором будет отображаться время. Создаем разметку:

В выше приведённом примере плагин вызван для элемента div с идентификатором countdown. Плагин добавляет ему класс countdownHolder (поэтому несколько стилей применяются к элементу с помощью кода CSS). Рассмотрим разметку для цифр. Существует два элемента span с классом digit для каждой единицы времени (дни, часы, минуты и секунды), что налагает ограничения по обратному отсчету количества дней (не более 99).

Статический класс определяет для цифр градиентный фон и тени. При анимации данный класс удаляется, и CSS3 работает без замедления. Цифры объединены в группы, поэтому легко изменить стили для них. Например, добавление свойства font-size к классу .countDaysбудет влиять на обе цифры дня. Элемент span .countDiv является разделителем между единицами времени. Двоеточие формируется с помощью псевдо элементов :before/:after.

Теперь рассмотрим параметры jQuery, которые используются в плагине:

  • init - генерирует разметку, которая приведена выше;
  • switchDigit  - получает элемент span .position и анимирует цифры внутри него.

Выделим данный функционал отдельно, чтобы можно было рассматривать код плагина без помех.

assets/countdown/jquery.countdown.js

Теперь рассмотрим код плагина. Наш плагин может получать параметры для конкурирования - время события и возвратную функцию, которая выполняется на каждом такте отсчета и получает в качестве параметра оставшееся время. Для наглядности выше описанные функции в коде не приводятся.

assets/countdown/jquery.countdown.js

Функция tick вызывает саму себя (рекурсия) каждую секунду. В ней мы вычисляем время между заданной точкой и текущим значением. Функция updateDuo затем обновляет цифры в соответствии с полученными данными.

assets/js/script.js

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

Читайте также: