Таймер обратного отсчета с помощью 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);

}

});

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

Интересно:

Print article

Опубликовал admin 02.12.2011 в 17:25, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены.

Goldkidss

в sfw намного проще будет=)))
- serj_ben
  
  но редактировать сложнее)
Алексей

Спасибо за статью! Очень красивый таймер сделали.

Но не могу разобраться как задать дату обратного отсчета. Можно этот таймер использовать для отсчета до другой даты — не Нового Года?
- serj_ben
  
  Да можно, в файле script.js устанавливаем необходимую дату в ts = new Date(2012, 0, 1),
  - Алексей
    
    Нужна дата 04.02.2012. Ставлю в ts = new Date(2012, 02, 04), получаю на таймере «Еще 33 дня…»
    - serj_ben
      
      В файле
      jquery.countdown.js изменяем временной отрезок
      
      // Количество секунд в каждом временном отрезке var days = 24*60*60, hours = 60*60, minutes = 60;
      - Xydognik
        
        Уважаемый serj_ben скажите каким алгоритмом выщитывать эти временные отрезки никак не могу понять, если мне нужно установить таймер на 2 дня что мне нужно указать здесь
        var days = 24*60*60, hours = 60*60, minutes = 60;
        Заранее спасибо!!!
Руслан Лобов

Тварищи,помогите решить вопрос.

хочу использовать этот отличный таймер через модуль в джумле.

всё хорошо,модуль фунциклирует,но он сволочь применяет свой стиль ко всему сайту целиком,а не именно к модулю.
- Kavrasky
  
  создай дополнительный стиль и пицепи его только в этом модуле…
Руслан Лобов

из-за него у меня все ява модули на сайте сходят сума а если убрать -счетчик пропадает

со стилями решил проблему удалением
- Kavrasky
  
  Может не следует для начала столько ява скриптов пихать чтоб все сходило сума?
  - Руслан Лобов
    
    Проблема в том,что когда я подключаю скрипты в отдельном модуле,или даже в статью — он применяет эти скрипты абсолютно ко всему шаблону сайта ( если работали с джумла….)
    - Kavrasky
      
      Да ну ладно можно было прицепить стиль с содержимым страницы, так что выход есть)
      - Руслан Лобов
        
        вот меня и интересует,как можно обнести кодом это всё,что бы стиль и jquery скрипт работал только для отдельного участка когда )))))))
      - Kavrasky
        
        не понял чего ты хочешь…
      - Руслан Лобов
        
        Таймер обратного отсчета с помощью jQuery| Демонстрация для сайта RUDEBOX
        
        
        
        
        
        
        
        
        
        как сделать так,что бы только к этому блоку хтмл применился стиль (   )
        применялся джейквери ( src=»../code.jquery.comquery-1.7.1.min.js»>)
Игорь

А как сделать так, чтобы при перезагрузке браузера отсчёт продолжался, а не начинался снова? И чтобы завтра уже было 9 дней, а не 10? Т.е. отсчёт от первого захода посетителя на данный сайт.
- Игорь
  
  Прошу прощения:
  
  http://russiamagic.ru/study.php
  - Руслан Лобов
    
    как сделал-то? у меня такая же проблема
nsmd

Этот скрипт не работает в ИЕ7 и ИЕ8!
Руслан Лобов

задаю дату 2012.03.08 к примеру. счетчик мне лепит 39 дней )

что делать?
- Karandash
  
  Уже отвечали на этот вопрос:
  «В файле
  jquery.countdown.js изменяем временной отрезок
  // Количество секунд в каждом временном отрезке var days = 24*60*60, hours = 60*60, minutes = 60;»
Руслан Лобов

А как сделать так,что бы плагин считал время не от часов юзера,а от серверного времени?
Guido_ _fawkes

При обновлении страницы счетчик сбрасывается на начало отсчета. Подскажите пожалуйста, как сделать так что бы время не обновлялось?
- Dfgsdg
  
  Это только в демо версии
Гость

интегрировать в Joomla как? HELP
- Vadim Krulov
  
  Если версии джумлы разные то будет конфликтовать и не работать, ищи на форумах как решить проблему)
Гость

поставил на joomlu нижний счетчик идет а верхний стоят все нули 00:00:00:00 ???
Гость

ура я d joomlu установил раскажу всем за пиво isteiro@i.ua целый день убил, (админу за спасибо).
admin респект за класный сайт
ven-til

Здравствуйте.
а как к сайту на Джумле 1.5 подвязать этот счетчик?
- Alan
  
  Если на джумлу, то у тебя наверняка первой проблемой будет конфликт версий jQuery, попробуй оставить одну из библиотек, а дальше с установкой проблем не будет, делай все по уроку.
Сергей Васильев

Ребят помогите: Все установил тестом, все работает… Проблема в другом…
Распишу ситуацию которая меня волнует и для чего мне нужен этот счетчик:
Итак: В магазине акция — распродажа! Скидки 50% действуют только до 15 января!
Запустили акцию и запустили счетчик! Если человек зайдет завтра к примеру — то на счетчике должно быть; ОСТАЛОСЬ 14 дней — часов — минут — секунд…. Если человек зашел ЗА пять дней до конца акции — то на счетчике должно показывать: Осталось до конца 5 дней — часов — минут — секунд.. И тп…

У меня как…. Отсчет пошел…. Обновил страницу… Отсчет снова сначала пошел…
Как сделать так, что бы счетчик не начинался с начала хоть ты там обновляй страницу 100 раз/…. ????????????? ХЕЛП!

Заранее спасибо!
- Vanek
  
  Например:
  структура /timer.htm — твой таймер
  /script.php — скрипт обработки
  хранишь остаток в базе или файле;
  ajax запросом получаешь данные о количестве оставшихся секунд
  
  script.php?par=get_date
  //код писать не буду
  
  в timer.htm при вызове функции callback ajax’ом обновляешь данные о оставшемся времени;
  
  script.php?par=update&data=’твой остаток секунд’
Wowawolkow

куда закидывать этот архив?
как плагин он не устанавливается.
распишите, плиз, пути, которым необходимо следовать, чтобы залить в нужную папку и он начал работать.

цмс — вордпресс.
- Smotritel
  
  Надо залить все файлы с архива на сервер, можно прямо в корень папки, потом заходим в редактор темы, выбираем header.php ( заголовок сайта) и подключаем туда скрипты, также инициализируем сам плагин, сохраняем. Далее разметку можно вставлять разметку куда хочешь, хоть и в виджет.
  - Wowawolkow
    
    Благодарю!
    
    Возможно Вы дадите пару ключевых пояснений — что необходимо скопировать в header.php и, как инициализировать сам плагин.
    И, как найти код разметки, который потом можно вставить на страницу ? Могли бы Вы немного точнее описать эту процедуру?
    - Smotritel
      
      И так, смотри ( изображения прикрепил к сообщению ) пункт 1 и 2 тебе надо вставить в header.php. Пункт 3 это разметка,( countdown это сами часы,а note это текст под ними) ее вставляешь куда пожелаешь.
    - Wowawolkow
      
      Спасибо за помощь) С каждым разом я все ближе к установке счетчика на сайт)
      
      Но, пока, он так и не работает у меня как надо. Видимо я что-то делаю не правильно, либо недоделываю (по незнанию).
      Я сделал скрины того, как у меня выглядит вся эта ситуация с плагином обратного отсчета. Мне кажется я не туда подключаю скрипты. Можно получить еще подсказку в отношении того, как установка плагина должна выглядеть правильно?
      
      И, самый главный вопрос — как правильно прописать «работу» плагина на странице в выбраном месте? Либо в виде виджета на боковой панели?
    - Wowawolkow
      
      ..тут продолжение скринов (они пронумерованны)/
      
      еще есть возможность баннеры вешать сбоку, прописывая к ним адреса. вот, возможно ли этот таймер ввиде баннера использовать на боковой панели?
    - Smotritel
      
      Делаешь много лишних движений, можно было все добавить через редактор темы в админ панели( я про редактор header). Про вывод виджетом тебе надо зайти во вкладку внешний вид- виджеты ( в админке) — выбрать виджет текст, переместить в боковую панель и ставить разметку таймера и сохранить. А в любое другое место..заходишь в редактор шаблона, выбираешь single.php (одна запись, будет таймер выводится в самом посту ) или index.php (основной шаблон) будет выводится на главной.
    - Smotritel
      
      Во первых, на первом скрине ты вообще не в виджет ставишь, а не понятно куда, на третьем скрине надо вставлять не в визупльно, а в текст.
  - Wowawolkow
    
    Спасибо!
    
    Попробую исправить. Надеюсь получится.
Wowawolkow

Пока не получилось адекватно подключить плагин)
Когда закидываю содержимое архива в корень и подключаю скрипты в header.php — у меня появляется на главной следующее (скрин креплю). Пробовал другие способы, нижеописанные — не выводит таймер вообще нигде.
Wowawolkow

Добрый день.

Ребят, подскажите, что не так делаю.
Всё нижеперечисленное уже перепробовал.

Сам плагин необходимо вставить ввиде виджета в боковую панель. Но в итоге прописывается только имя созданного виджета, а начинки нету.
- Karandash
  
  Кто-то явно партачит))) я только-что проверил на своем сайте. 5 мин и все работает, сделал все как описал Smotritel)
  - Wowawolkow
    
    Сделал так же. Не пашет.
    
    Может быть допустил ошибку — поправьте, пожалуйста.
    Очень необходимо добавить его на сайт.
    
    Благодарю за помощь!
  - Wowawolkow
    
    Спасибо за помощь) Помогло — просто добавил адрес сайта перед …/assets.
    
    Хотел бы еще выяснить одну вещь — можно ли этот таймер в виде виджета на боковой панели сделать «активным» — т.е. подключить к нему ссылку, и нажимая на таймер переходить на другой адрес ?
    И, можно ли, добавить этот виджет только на одну страницу ?
22komel22

А можно сделать чтоб таймер запоминал сколько отсчитал для каждого пользователи и при обновлении страницы не начинал заново отсчет? например по куки
Derbrent

А как это все запихнуть в модуль для j2.5 ?
Алексей

А таймер формата ГГ,ММ,ДД слабо сделать?!!!!
- serj_ben
  
  http://www.timegenerator.ru/ хороший сервис если интересно!)

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

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

Интересно:

Опрос блога

Наши партнеры

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

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

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

Интересно:

Зайти

Опрос блога

Наши партнеры

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