Таймер отсчета времени на jQuery

В этом уроке мы сделаем таймер обратного отсчета времени с помощью jQuery.

Сегодня мы создадим анимированный таймер, который будет считать дни, часы, секунды до определенного события и обновляться каждую секунду. Начнем с html разметки нашего таймера.

HTML

Следующий html код будет генерировать jQuery, вам не придется прописывать его вручную, надо только выбрать элемент в который он будет вставлен. В нашем случае это #countdown.

<div id="countdown">
	<span>
		<span>
			<span></span>
		</span>
		<span>
			<span></span>
		</span>
	</span>

	<span></span>

	<span>
		<span>
			<span></span>
		</span>
		<span>
			<span></span>
		</span>
	</span>

	<span></span>

	<span>
		<span>
			<span></span>
		</span>
		<span>
			<span></span>
		</span>
	</span>

	<span></span>

	<span>
		<span>
			<span></span>
		</span>
		<span>
			<span></span>
		</span>
	</span>

	<span></span>
</div>

Так же к нашему элементу будет добавлен класс countdownHolder. Для каждой временной единицы отведено 2 места для цифр, т.о. максимальное количество времени для отсчета — 99 дней.

jQuery

Сначала опишем две вспомогательные функции: init() — будет генерировать разметку нашего таймера и switchDigit() — будет принимать элемент .position и анимировать цифру.

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

	// Количество секунд в каждой единице времени
	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);

			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 вызывается каждую секунду. Она вычисляет разницу между текущим временем и заданным. Наш плагин готов! Применим его:

$(function(){

	var note = $('#note'),
		ts = new Date(2012, 0, 1),
		newYear = true;

	if((new Date()) > ts){
		// *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 + " 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. Изменяя размер шрифта — вы можете изменять размер счетчика. Если вы не хотите отображать какую либо временную единицу (например — дни), достаточно добавить display:none в CSS.