Таймер на jQuery

11.12.2012


Таймеров обратного отсчета существует достаточно много. Но иногда требуется определить, сколько времени прошло с момента события. В одном из наших уроков мы строили таймер обратного отсчета в виде плагина для jQuery. Модифицируем его для прямого подсчета прошедших мгновений.

Шаг 1. Изменяем название варианта


Сначала возьмем копию уже готового таймера обратного отсчета. Изменяем имя папки assets/countdown на assets/countup. Также изменяем путь в файле index.html, который указывает на данный файл.

Шаг 2. Модифицируем код


Небольшие изменения в коде плагина изменят направления его счета. Открываем assets/countup/jquery.contup.js и редактируем код:

// Создаем плагин
$.fn.countup = function(prop){

	var options = $.extend({
		callback	: function(){},
		start		: new Date()
	},prop);

	var passed = 0, d, h, m, s,
		positions;

	// Инициализация плагина
	init(this, options);

	positions = this.find('.position');

	(function tick(){

		passed = Math.floor((new Date() - options.start) / 1000);

		// Прошло дней
		d = Math.floor(passed / days);
		updateDuo(0, 1, d);
		passed -= d*days;

		// Прошло часов
		h = Math.floor(passed / hours);
		updateDuo(2, 3, h);
		passed -= h*hours;

		// Прошло минут
		m = Math.floor(passed / minutes);
		updateDuo(4, 5, m);
		passed -= m*minutes;

		// Прошло секунд
		s = passed;
		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;
};

Вызов плагина осуществляется просто (данный код помещаем в файл script.js):

$('#countdown').countup();

Также можно осуществлять отсчет от указанной даты и времени:

$('#countdown').countup({
    start: new Date(2012, 10, 27, 15, 58, 21) //year, month, day, hour, min, sec
});

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


  

Другие темы:

Красивые Слайдеры,Слайд-шоу и Галереи для вашего сайта
Уроки создания игр с нуля в видеоформате
Обратная связь на AJAX и PHP
Инфобизнес клик за кликом