При создании информационной страницы для какого-либо события очень полезным элементом будет дисплей с обратным отсчетом времени. Счетчик подстегивает посетителя визуализацией утекающий сквозь пальцы секунд, что в сочетании с полем для введения адреса email может существенно увеличить базу подписчиков.
В данном уроке мы построим плагин jQuery для вывода таймера обратного отсчета. Он будет выводить количество оставшихся дней, часов, минут и секунд до определенного момента. Анимированное обновление счетчика совершается каждую секунду.
HTML
Плагин имеет имя “countdown” (в переводе на русский язык – “обратный отсчет”). Вызванный для пустого элемента, плагин будет заполнять его кодом HTML, необходимым для формирования дисплея таймера. Больше не надо ничего делать, только выбрать нужный элемент, в котором будет отображаться время.
Генерируемая разметка
01 |
< div id = "countdown" class = "countdownHolder" > |
02 |
< span class = "countDays" > |
03 |
< span class = "position" > |
04 |
< span class = "digit static" ></ span > |
06 |
< span class = "position" > |
07 |
< span class = "digit static" ></ span > |
11 |
< span class = "countDiv countDiv0" ></ span > |
13 |
< span class = "countHours" > |
14 |
< span class = "position" > |
15 |
< span class = "digit static" ></ span > |
17 |
< span class = "position" > |
18 |
< span class = "digit static" ></ span > |
22 |
< span class = "countDiv countDiv1" ></ span > |
24 |
< span class = "countMinutes" > |
25 |
< span class = "position" > |
26 |
< span class = "digit static" ></ span > |
28 |
< span class = "position" > |
29 |
< span class = "digit static" ></ span > |
33 |
< span class = "countDiv countDiv2" ></ span > |
35 |
< span class = "countSeconds" > |
36 |
< span class = "position" > |
37 |
< span class = "digit static" ></ span > |
39 |
< span class = "position" > |
40 |
< span class = "digit static" ></ span > |
44 |
< span class = "countDiv countDiv3" ></ span > |
В выше приведённом примере плагин вызван для элемента 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
01 |
function init(elem, options){ |
02 |
elem.addClass( 'countdownHolder' ); |
04 |
// Создаем разметку внутри контейнера |
05 |
$.each([ 'Days' , 'Hours' , 'Minutes' , 'Seconds' ], function (i){ |
06 |
$( '<spanplain">+ this + '">' ).html( |
07 |
'<span class= "position" >\ |
08 |
<span class= "digit static" >0</span>\ |
10 |
<span class= "position" >\ |
11 |
<span class= "digit static" >0</span>\ |
16 |
elem.append( '<spanplain">+i+ '"></span>' ); |
22 |
// Создаем анимированный переход между двумя цифрами |
23 |
function switchDigit(position,number){ |
25 |
var digit = position.find( '.digit' ) |
27 |
if (digit.is( ':animated' )){ |
31 |
if (position.data( 'digit' ) == number){ |
32 |
// Мы уже вывели данную цифру |
36 |
position.data( 'digit' , number); |
38 |
var replacement = $( '<span>' ,{ |
47 |
// Класс .static добавляется, когда завершается анимация. |
48 |
// Выполнение идет более плавно. |
52 |
.removeClass( 'static' ) |
53 |
.animate({top: '2.5em' ,opacity:0}, 'fast' , function (){ |
59 |
.animate({top:0,opacity:1}, 'fast' , function (){ |
60 |
replacement.addClass( 'static' ); |
Теперь рассмотрим код плагина. Наш плагин может получать параметры для конкурирования – время события и возвратную функцию, которая выполняется на каждом такте отсчета и получает в качестве параметра оставшееся время. Для наглядности выше описанные функции в коде не приводятся.
assets/countdown/jquery.countdown.js
03 |
// Количество секунд в каждом временном отрезке |
09 |
$.fn.countdown = function (prop){ |
11 |
var options = $.extend({ |
12 |
callback : function (){}, |
16 |
var left, d, h, m, s, positions; |
18 |
// инициализируем плагин |
21 |
positions = this .find( '.position' ); |
26 |
left = Math.floor((options.timestamp - ( new Date())) / 1000); |
33 |
d = Math.floor(left / days); |
38 |
h = Math.floor(left / hours); |
43 |
m = Math.floor(left / minutes); |
51 |
// Вызываем возвратную функцию пользователя |
52 |
options.callback(d, h, m, s); |
54 |
// Планируем следующий вызов данной функции через 1 секунду |
55 |
setTimeout(tick, 1000); |
58 |
// Данная функция обновляет две цифровые позиции за один раз |
59 |
function updateDuo(minor,major,value){ |
60 |
switchDigit(positions.eq(minor),Math.floor(value/10)%10); |
61 |
switchDigit(positions.eq(major),value%10); |
68 |
// Здесь размещаются две вспомогательные функции |
Функция tick вызывает саму себя (рекурсия) каждую секунду. В ней мы вычисляем время между заданной точкой и текущим значением. Функция updateDuo затем обновляет цифры в соответствии с полученными данными.
Плагин готов! Теперь рассмотрим пример его использования (демонстрационная страница):
assets/js/script.js
03 |
var note = $( '#note' ), |
04 |
ts = new Date(2012, 0, 1), |
07 |
if (( new Date()) > ts){ |
08 |
// Задаем точку отсчета для примера. Пусть будет очередной Новый год или дата через 10 дней. |
09 |
// Обратите внимание на *1000 в конце - время должно задаваться в миллисекундах |
10 |
ts = ( new Date()).getTime() + 10*24*60*60*1000; |
14 |
$( '#countdown' ).countdown({ |
16 |
callback : function (days, hours, minutes, seconds){ |
20 |
message += "Дней: " + days + ", " ; |
21 |
message += "часов: " + hours + ", " ; |
22 |
message += "минут: " + minutes + " и " ; |
23 |
message += "секунд: " + seconds + " <br />" ; |
26 |
message += "осталось до Нового года!" ; |
29 |
message += "осталось до момента через 10 дней!" ; |
Конечно, чтобы демонстрация заработала, нужно подключить файлы CSS и JavaScript из папки плагина к странице.
Заключение
Плагин можно использовать на страницах с информацией о каком-либо событии. Основными его преимуществом является полная реализация на CSS без изображений. Увеличение или уменьшение размера шрифта позволяет выделить нужные единицы времени. А для отключения ненужных единиц надо использовать свойство display:none в соответствующем классе.
Источник: ruseller.com