Создание JQuery Таймер
Сегодня мы собираемся построить плагин JQuery для
отображения таймера обратного отсчета. Он покажет оставшиеся дни, часы,
минуты и секунды до вашего мероприятия, а также анимированные обновления на
каждую секунду.
СМОТРЕТЬ
ДЕМО СКАЧАТЬ
ИСХОДНИК
Давайте начнем с разметки!
HTML
Дадим плагину
творческое название
"обратный отсчет". Вставляется в пустой элемент, HTML, который
необходим для таймера обратного отсчета. Вам не нужно ничего делать, просто
укажите место, в котором вы хотите, его показать.
Создание разметки
|
<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>
|
В приведенном выше примере, добавили countdownHolder класс
(несколько стилей применяются к элементу через CSS).
Цифры собраны в группах, что позволяет легко укладывать
их. Добавление размера шрифта в. countDays , будет влиять
на размер цифр дней.
В . countDiv пролеты являются разделителями
между единицами. Толстая линия формируется: перед и после элементов.
Но как эта разметка генерируется?
JQuery
Прежде всего, давайте напишем две вспомогательные функции, используемые
плагином:
- init
генерирует разметку которую вы видели выше;
- switchDigit
занимает промежуточное положение и
оживляет цифры внутри него.;
jquery.countdown.js
|
function init(elem, options){
elem.addClass('countdownHolder');
// Creating the markup inside the container
$.each(['Days','Hours','Minutes','Seconds'],function(i){
$('<span
class="count'+this+'">').html(
'<span
class="position">\
<span
class="digit static">0</span>\
</span>\
<span
class="position">\
<span
class="digit static">0</span>\
</span>'
).appendTo(elem);
if(this!="Seconds"){
elem.append('<span
class="countDiv countDiv'+i+'"></span>');
}
});
}
// Creates an animated transition between the two numbers
function switchDigit(position,number){
var digit = position.find('.digit')
if(digit.is(':animated')){
return false;
}
if(position.data('digit') == number){
// We are already showing this
number
return false;
}
position.data('digit', number);
var replacement = $('<div>',{
'class':'digit',
css:{
top:'-2.1em',
opacity:0
},
html:number
});
// The .static class is added when the animation
// completes. This makes it run smoother.
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');
});
}
|
Наш плагин должен связать объект с параметрами для лучшего
конфигурирования - временной метки мы
рассчитываем функцию обратного вызова.
Обратный отсчет / jquery.countdown.js
|
(function($){
// Number of seconds in every time division
var days = 24*60*60,
hours = 60*60,
minutes = 60;
// Creating the plugin
$.fn.countdown = function(prop){
var options = $.extend({
callback : function(){},
timestamp : 0
},prop);
var left, d, h, m, s, positions;
// Initialize the plugin
init(this, options);
positions = this.find('.position');
(function tick(){
// Time left
left =
Math.floor((options.timestamp - (new Date())) / 1000);
if(left < 0){
left = 0;
}
// Number of days left
d = Math.floor(left / days);
updateDuo(0, 1, d);
left -= d*days;
// Number of hours left
h = Math.floor(left / hours);
updateDuo(2, 3, h);
left -= h*hours;
// Number of minutes left
m = Math.floor(left / minutes);
updateDuo(4, 5, m);
left -= m*minutes;
// Number of seconds left
s = left;
updateDuo(6, 7, s);
// Calling an optional user
supplied callback
options.callback(d, h, m, s);
// Scheduling another call of
this function in 1s
setTimeout(tick, 1000);
})();
// This function updates two digit positions at once
function updateDuo(minor,major,value){
switchDigit(positions.eq(minor),Math.floor(value/10)%10);
switchDigit(positions.eq(major),value%10);
}
return this;
};
/* The two helper functions go here */
|
Функция назначает для себя каждую секунду. Внутри него,
мы вычисляем разницу во времени между данной меткой времени и текущей датой. UpdateDuo
функция обновляет цифры содержащие единицу времени.
Плагин готов!
/ JS / script.js
|
$(function(){
var note = $('#note'),
ts = new Date(2012, 0, 1),
newYear = true;
if((new Date()) > ts){
// The new year is here! Count towards something else.
// Notice the *1000 at the end - time must be in milliseconds
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 + "
day" + ( days==1 ? '':'s' ) + ", ";
message += hours + "
hour" + ( hours==1 ? '':'s' ) + ", ";
message += minutes + "
minute" + ( minutes==1 ? '':'s' ) + " and ";
message += seconds + "
second" + ( seconds==1 ? '':'s' ) + " <br />";
if(newYear){
message += "left until
the new year!";
}
else {
message += "left to 10
days from now!";
}
note.html(message);
}
});
});
|
СМОТРЕТЬ
ДЕМО СКАЧАТЬ
ИСХОДНИК
Конечно, для работы,
вам придется включить CSS и JS файл из папки обратного отсчета в вашей
странице.
Готово!
Источник
|
