Вы здесь
Главная > Мой блог > WEB-разработка > Таймер обратного отсчета на jQuery

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

-

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

В данном уроке мы построим плагин jQuery для вывода таймера обратного отсчета. Он будет выводить количество оставшихся дней, часов, минут и секунд до определенного момента. Анимированное обновление счетчика совершается каждую секунду.

demosourse

 

HTML

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

Генерируемая разметка

01 <div id="countdown" class="countdownHolder">
02     <span class="countDays">
03         <span class="position">
04             <span class="digit static"></span>
05         </span>
06         <span class="position">
07             <span class="digit static"></span>
08         </span>
09     </span>
10
11     <span class="countDiv countDiv0"></span>
12
13     <span class="countHours">
14         <span class="position">
15             <span class="digit static"></span>
16         </span>
17         <span class="position">
18             <span class="digit static"></span>
19         </span>
20     </span>
21
22     <span class="countDiv countDiv1"></span>
23
24     <span class="countMinutes">
25         <span class="position">
26             <span class="digit static"></span>
27         </span>
28         <span class="position">
29             <span class="digit static"></span>
30         </span>
31     </span>
32
33     <span class="countDiv countDiv2"></span>
34
35     <span class="countSeconds">
36         <span class="position">
37             <span class="digit static"></span>
38         </span>
39         <span class="position">
40             <span class="digit static"></span>
41         </span>
42     </span>
43
44     <span class="countDiv countDiv3"></span>
45 </div>

В выше приведённом примере плагин вызван для элемента 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');
03
04     // Создаем разметку внутри контейнера
05     $.each(['Days','Hours','Minutes','Seconds'],function(i){
06         $('<spanplain">+this+'">').html(
07             '<span class="position">\
08                 <span class="digit static">0</span>\
09             </span>\
10             <span class="position">\
11                 <span class="digit static">0</span>\
12             </span>'
13         ).appendTo(elem);
14         
15         if(this!="Seconds"){
16             elem.append('<spanplain">+i+'"></span>');
17         }
18     });
19
20 }
21
22 // Создаем анимированный переход между двумя цифрами
23 function switchDigit(position,number){
24     
25     var digit = position.find('.digit')
26     
27     if(digit.is(':animated')){
28         return false;
29     }
30     
31     if(position.data('digit') == number){
32         // Мы уже вывели данную цифру
33         return false;
34     }
35     
36     position.data('digit', number);
37     
38     var replacement = $('<span>',{
39         'class':'digit',
40         css:{
41             top:'-2.1em',
42             opacity:0
43         },
44         html:number
45     });
46     
47     // Класс .static добавляется, когда завершается анимация.
48     // Выполнение идет более плавно.
49     
50     digit
51         .before(replacement)
52         .removeClass('static')
53         .animate({top:'2.5em',opacity:0},'fast',function(){
54             digit.remove();
55         })
56
57     replacement
58         .delay(100)
59         .animate({top:0,opacity:1},'fast',function(){
60             replacement.addClass('static');
61         });
62 }

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

assets/countdown/jquery.countdown.js

01 (function($){
02     
03     // Количество секунд в каждом временном отрезке
04     var days    = 24*60*60,
05         hours   = 60*60,
06         minutes = 60;
07     
08     // Создаем плагин
09     $.fn.countdown = function(prop){
10         
11         var options = $.extend({
12             callback    : function(){},
13             timestamp   : 0
14         },prop);
15         
16         var left, d, h, m, s, positions;
17
18         // инициализируем плагин
19         init(this, options);
20         
21         positions = this.find('.position');
22         
23         (function tick(){
24             
25             // Осталось времени
26             left = Math.floor((options.timestamp - (new Date())) / 1000);
27             
28             if(left < 0){
29                 left = 0;
30             }
31             
32             // Осталось дней
33             d = Math.floor(left / days);
34             updateDuo(0, 1, d);
35             left -= d*days;
36             
37             // Осталось часов
38             h = Math.floor(left / hours);
39             updateDuo(2, 3, h);
40             left -= h*hours;
41             
42             // Осталось минут
43             m = Math.floor(left / minutes);
44             updateDuo(4, 5, m);
45             left -= m*minutes;
46             
47             // Осталось секунд
48             s = left;
49             updateDuo(6, 7, s);
50             
51             // Вызываем возвратную функцию пользователя
52             options.callback(d, h, m, s);
53             
54             // Планируем следующий вызов данной функции через 1 секунду
55             setTimeout(tick, 1000);
56         })();
57         
58         // Данная функция обновляет две цифровые позиции за один раз
59         function updateDuo(minor,major,value){
60             switchDigit(positions.eq(minor),Math.floor(value/10)%10);
61             switchDigit(positions.eq(major),value%10);
62         }
63         
64         return this;
65     };
66
67
68     // Здесь размещаются две вспомогательные функции
69
70 })(jQuery);

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

Плагин готов! Теперь рассмотрим пример его использования (демонстрационная страница):

assets/js/script.js

01 $(function(){
02     
03     var note = $('#note'),
04         ts = new Date(2012, 0, 1),
05         newYear = true;
06     
07     if((new Date()) > ts){
08         // Задаем точку отсчета для примера. Пусть будет очередной Новый год или дата через 10 дней.
09         // Обратите внимание на *1000 в конце - время должно задаваться в миллисекундах
10         ts = (new Date()).getTime() + 10*24*60*60*1000;
11         newYear = false;
12     }
13         
14     $('#countdown').countdown({
15         timestamp   : ts,
16         callback    : function(days, hours, minutes, seconds){
17             
18             var message = "";
19             
20             message += "Дней: " + days +", ";
21             message += "часов: " + hours + ", ";
22             message += "минут: " + minutes + " и ";
23             message += "секунд: " + seconds + " <br />";
24             
25             if(newYear){
26                 message += "осталось до Нового года!";
27             }
28             else {
29                 message += "осталось до момента через 10 дней!";
30             }
31             
32             note.html(message);
33         }
34     });
35     
36 });

Конечно, чтобы демонстрация заработала, нужно подключить файлы CSS и JavaScript из папки плагина к странице.

 

Заключение

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

Источник: ruseller.com

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

Top