Таймер обратного отсчета с помощью jQuery
Для создания какой-либо информационной страницы полезной деталью будет таймер обратного отсчета. В данном уроке мы рассмотрим как это можно сделать средствами jquery для вывода таймера обратного отсчета. Он будет выводить количество оставшихся дней, часов, минут и секунд до определенного момента. Анимированное обновление счетчика совершается каждую секунду. Основными его преимуществом является полная реализация на CSS без изображений. Увеличение или уменьшение размера шрифта позволяет выделить нужные единицы времени.
И так, плагин имеет имя “countdown”. Вызванный для пустого элемента, плагин будет заполнять его кодом HTML, необходимым для формирования дисплея таймера. Больше не надо ничего делать, только выбрать нужный элемент, в котором будет отображаться время. Создаем разметку:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<div id="countdown" class="countdownHolder"> <span class="countDays"> <span class="position"> <span class="digit static"></span> </span> <span class="position"> <span class="digit static"></span> </span> </span> <span class="countDiv countDiv0"></span> <span class="countHours"> <span class="position"> <span class="digit static"></span> </span> <span class="position"> <span class="digit static"></span> </span> </span> <span class="countDiv countDiv1"></span> <span class="countMinutes"> <span class="position"> <span class="digit static"></span> </span> <span class="position"> <span class="digit static"></span> </span> </span> <span class="countDiv countDiv2"></span> <span class="countSeconds"> <span class="position"> <span class="digit static"></span> </span> <span class="position"> <span class="digit static"></span> </span> </span> <span class="countDiv countDiv3"></span> </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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
function init(elem, options){ elem.addClass('countdownHolder'); // Создаем разметку внутри контейнера $.each(['Days','Hours','Minutes','Seconds'],function(i){ $('<span>').html( '<span>\ <span>0</span>\ </span>\ <span>\ <span>0</span>\ </span>' ).appendTo(elem); if(this!="Seconds"){ elem.append('<span></span>'); } }); } // Создаем анимированный переход между двумя цифрами function switchDigit(position,number){ var digit = position.find('.digit') if(digit.is(':animated')){ return false; } if(position.data('digit') == number){ // Мы уже вывели данную цифру return false; } position.data('digit', number); var replacement = $('<span>',{ 'class':'digit', css:{ top:'-2.1em', opacity:0 }, html:number }); // Класс .static добавляется, когда завершается анимация. // Выполнение идет более плавно. digit .before(replacement) .removeClass('static') .animate({top:'2.5em',opacity:0},'fast',function(){ digit.remove(); }) replacement .delay(100) .animate({top:0,opacity:1},'fast',function(){ replacement.addClass('static'); }); } |
Теперь рассмотрим код плагина. Наш плагин может получать параметры для конкурирования — время события и возвратную функцию, которая выполняется на каждом такте отсчета и получает в качестве параметра оставшееся время. Для наглядности выше описанные функции в коде не приводятся.
assets/countdown/jquery.countdown.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
(function($){ // Количество секунд в каждом временном отрезке var days = 24*60*60, hours = 60*60, minutes = 60; // Создаем плагин $.fn.countdown = function(prop){ var options = $.extend({ callback : function(){}, timestamp : 0 },prop); var left, d, h, m, s, positions; // инициализируем плагин init(this, options); positions = this.find('.position'); (function tick(){ // Осталось времени left = Math.floor((options.timestamp - (new Date())) / 1000); if(left < 0){ left = 0; } // Осталось дней d = Math.floor(left / days); updateDuo(0, 1, d); left -= d*days; // Осталось часов h = Math.floor(left / hours); updateDuo(2, 3, h); left -= h*hours; // Осталось минут m = Math.floor(left / minutes); updateDuo(4, 5, m); left -= m*minutes; // Осталось секунд s = left; updateDuo(6, 7, s); // Вызываем возвратную функцию пользователя options.callback(d, h, m, s); // Планируем следующий вызов данной функции через 1 секунду setTimeout(tick, 1000); })(); // Данная функция обновляет две цифоровые позиции за один раз function updateDuo(minor,major,value){ switchDigit(positions.eq(minor),Math.floor(value/10)%10); switchDigit(positions.eq(major),value%10); } return this; }; // Здесь размещаются две вспомогательные функции })(jQuery); |
Функция tick вызывает саму себя (рекурсия) каждую секунду. В ней мы вычисляем время между заданной точкой и текущим значением. Функция updateDuo затем обновляет цифры в соответствии с полученными данными.
assets/js/script.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
$(function(){ var note = $('#note'), ts = new Date(2012, 0, 1), newYear = true; if((new Date()) > ts){ // Задаем точку отсчета для примера. Пусть будет дата через 10 дней. // Обратите внимание на *1000 в конце - время должно задаваться в миллисекундах ts = (new Date()).getTime() + 10*24*60*60*1000; newYear = false; } $('#countdown').countdown({ timestamp : ts, callback : function(days, hours, minutes, seconds){ var message = ""; message += "Дней: " + days +", "; message += "часов: " + hours + ", "; message += "минут: " + minutes + " и "; message += "секунд: " + seconds + " <br />"; if(newYear){ message += "осталось до Нового года!"; } else { message += "осталось до момента через 10 дней!"; } note.html(message); } }); }); |
Вот и все, чтобы все правильно работало не забывайте указывать правильный путь к стилям и скриптам. Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
Читайте также:
Опубликовал Cooper 02.12.2011 в 17:25, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |