Таймер на jQuery

Таймеров обратного отсчета существует достаточно много. Но иногда требуется определить, сколько времени прошло с момента события. В одном из наших уроков мы строили таймер обратного отсчета в виде плагина для 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
});

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/mzmNmlBVX2w/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Таймер на jQuery | | 2012-12-03 22:04:09 | | Статьи Web-мастеру | | Таймеров обратного отсчета существует достаточно много. Но иногда требуется определить, сколько времени прошло с момента события. В одном из наших уроков мы строили таймер обратного отсчета в виде | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: