Таймер обратного отсчета с помощью jQuery

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

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

И так, плагин имеет имя “countdown”. Вызванный для пустого элемента, плагин будет заполнять его кодом 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>

</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

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');
		});
}

function init(elem, options){

elem.addClass('countdownHolder');

// Создаем разметку внутри контейнера

$.each(['Days','Hours','Minutes','Seconds'],function(i){

$('').html(

'\

0\

\

\

0\

'

).appendTo(elem);

if(this!="Seconds"){

elem.append('');

}

});

}

// Создаем анимированный переход между двумя цифрами

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 = $('',{

'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

(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);

(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

$(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);
		}
	});
});

$(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 + " ";

if(newYear){

message += "осталось до Нового года!";

}

else {

message += "осталось до момента через 10 дней!";

}

note.html(message);

}

});

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

Таймер обратного отсчета с помощью jQuery

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

Интересно:

Не пропусти

Опрос блога

Подписывайтесь

Популярные статьи

Таймер обратного отсчета с помощью jQuery

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

Интересно:

Зайти

Не пропусти

Опрос блога

Подписывайтесь

Популярные статьи