Войти Регистрация

jQuery таймер: создаем таймер обратного отсчета на jquery


Какова цель таймера, для сайта? Когда мы ожидаем, какого то события, мы пытаемся найти способ показать пользователям, сколько времени осталось. Таймер дает чувство важности события, и если его связать с email полем ввода, то вы получите намного больше подписчиков на ваши новости.

Что мы ожидаем от jQuery таймера? Сегодня мы будем создавать jQuery плагин для отображения обратного отсчета времени. Он будет показывать оставшиеся дни, часы, минуты и секунды до начала события. Что же, начнем…

Вы можете скачать пример работы одним архивом: countdown_demo.rar

HTML

Все что необходимо для работы таймера это указать, какой div будет нашим таймером. Мы просто установим id блока countdown, а jQuery плагин таймера позаботиться о следующей 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>

В этом примере кода, jquery плагин будет вызываться и работать с div, у которого id – countdown. К этому элементу добавлен класс countdownHolder(он будет автоматически добавлятся, содержит некоторые элементы дизайна с помощью CSS).

Внутри, находится разметка для цифр таймера. Предусмотрены два span элемента для цифр на дни, часы, минуты и секунды. Это означает, что вы можете вести отсчет времени к той дате, которая не дальше 99 дней в будущем. Постоянно использовать таймер не получится. Это не целесообразно и менее впечатлительно.

CSS

Создадим файл с классами стилей для таймера.

.countdownHolder{
	width:450px;
	margin:0 auto;
	font: 40px/1.5 'Open Sans Condensed',sans-serif;
	text-align:center;
	letter-spacing:-3px;
}

.position{
	display: inline-block;
	height: 1.6em;
	overflow: hidden;
	position: relative;
	width: 1.05em;
}

.digit{
	position:absolute;
	display:block;
	width:1em;
	background-color:#444;
	border-radius:0.2em;
	text-align:center;
	color:#fff;
	letter-spacing:-1px;
}

.digit.static{
	box-shadow:1px 1px 1px rgba(4, 4, 4, 0.35);
	
	background-image: linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
	background-image: -o-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
	background-image: -moz-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
	background-image: -webkit-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
	background-image: -ms-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
	
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.5, #3A3A3A),
		color-stop(0.5, #444444)
	);
}

/**
 * Вы можете использовать эти стили для скрытия некоторых блоков
 */

.countDays{ /* display:none !important;*/ }
.countDiv0{ /* display:none !important;*/ }
.countHours{}
.countDiv1{}
.countMinutes{}
.countDiv2{}
.countSeconds{}


.countDiv{
	display:inline-block;
	width:16px;
	height:1.6em;
	position:relative;
}

.countDiv:before,
.countDiv:after{
	position:absolute;
	width:5px;
	height:5px;
	background-color:#444;
	border-radius:50%;
	left:50%;
	margin-left:-3px;
	top:0.5em;
	box-shadow:1px 1px 1px rgba(4, 4, 4, 0.5);
	content:'';
}

.countDiv:after{
	top:0.9em;
}

Статический класс для цифр придает им градиентный фон и тень для блока цифры. Вы можете придать свой стиль таймеру, редактируя CSS файл.

Таймер обратного отсчета времени на jquery

Элементы span с классом .countDiv – это разделители между блоками цифр. Эта структура сформирована с помощью :before/:after атрибутов.

Как же формируется эта разметка?

jQuery

Для начала, создадим две вспомогательные функции используемые плагином:

init – формирует разметку, которую вы только что видели.

switchDigit – получает .positionspan и анимирует цифры в нем.

Отделение этих функций от кода плагина, позволяет держать код плагина в чистоте.

jquery.countdown.js – вспомогательные функции

function init(elem, options){
	elem.addClass('countdownHolder');

	// Создание HTML разметки внутри контейнера
	$.each(['Days','Hours','Minutes','Seconds'],function(i){
		$('<span class="count'+this+'">').html(
			'<span class="position">\
				<span class="digit static">0</span>\
			</span>\
			<span class="position">\
				<span class="digit static">0</span>\
			</span>'
		).appendTo(elem);

		if(this!="Seconds"){
			elem.append('<span class="countDiv countDiv'+i+'"></span>');
		}
	});

}

// Создает анимационный эффект между двумя цифрами таймера
function switchDigit(position,number){

	var digit = position.find('.digit')

	if(digit.is(':animated')){
		return false;
	}

	if(position.data('digit') == number){
		// We are already showing this number
		return false;
	}

	position.data('digit', number);

	var replacement = $('<div>',{
		'class':'digit',
		css:{
			top:'-2.1em',
			opacity:0
		},
		html:number
	});

	// The .static class is added when the animation
	// completes. This makes it run smoother.

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

Отлично! Теперь напишем основу плагина. Наш плагин, должен принимать объект с параметрами для удобства настройки – время к которому ведется отсчет, callback функция, вызываемая с каждой секундой она обновляет время.

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

			// Callback
			options.callback(d, h, m, s);

			// Автоматический вызов этой функции каждую секунду
			setTimeout(tick, 1000);
		})();

		// Эта функция обновляет две цифры в блоке
		function updateDuo(minor,major,value){
			switchDigit(positions.eq(minor),Math.floor(value/10));
			switchDigit(positions.eq(major),value);
		}

		return this;
	};

	/* Две вспомогательные функции, которые мы создали ранее */
})(jQuery);

Функция tick, вызывает себя каждую секунду. Таким образом, мы можем считать разницу во времени. Функция updateDuo обновляет цифры.

jQuery таймер готов! – посмотрим, как его можно использовать в коде.

Использование jQuery таймера

Просто вставьте следующие строки кода в вашем файле с JavaScript.

script.js

$(function(){

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

	if((new Date()) > ts){
		// The new year is here! Count towards something else.
		// Notice the *1000 at the end - time must be in milliseconds
		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 и JS файлы таймера к вашей странице.

Цикличность

Для того, чтобы сделать таймер цикличным, например посчитать оставшееся время до следующего дня, достаточно изменить несколько строк в коде. Файл scripts.php будет выглядеть так:

$(function(){

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

if((new Date()) > ts){
	var t = new Date();
	var beforeTommorow = (24-t.getHours())*60*60*1000+(60-t.getMinutes())*60*1000+(60-t.getSeconds())*1000;
	ts = (new Date()).getTime() + beforeTommorow;
	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);
	}
});

});
 

Что еще?

Вы можете использовать скрипт, как отличное дополнение на каждой странице перед важным событием. Лучшее в jquery таймере то, что он не использует изображений, все работает на чистом CSS коде.


Источник материала ...

Дальше: CSS центрирование DIV блоков: горизонтальное и вертикальное


Дискуссия по теме    44 Комментария 
Добавить комментарий
Сергей 20.10.2015 в 10:44
Не могу понять где установить свой отсчет времени. Например: 3 дня, 5 часов, 20 минут, 30 секунд. Ставлю в строке: ts = (new Date()).getTime() 03*05*20*30*1000; - не получается. Не то отображает.
Тарас 20.10.2015 в 16:44
03*05*20*30*1000 - в этих цифрах расчеты не правильны... вам надо получить время в миллисекундах (3*24*60*60 плюс 5*60*60 плюс 20*60 плюс 30)*1000 на сайте вырезает символы плюса... поэтому поменяете слова на сам символ!
Мелине 20.02.2015 в 01:37
с цикличностью часа 2 промучалась - ничего даже на демо версии... Она вообще тестировалась?
Антон 08.12.2014 в 01:20
Спасибо за таймер, единственное, может подскажите как сделать, чтобы счетчик считал только либо вводимое количество дней, либо вводимое количество часов. Заранее благодарен.
Анастасия 13.08.2014 в 14:59
Здравствуйте) А как сделать так, чтобы в счетчике первое число (дни) было из трех символов, а остальные из двух... если добавлять <span class="position">\ <span class="digit static">0</span>\ </span> то и дни и минуты и секунды становятся трехзначными...
Борис 10.03.2014 в 09:40
прочитал все, понял почти все. Очень прикольный таймер, но вот одна проблема. Не знаю как сделать, что б начинался отчет с нужного мне времени? Например 5 часа 45 минут и вниз. И каждый раз при обновлении 5:45
Айдар 12.12.2013 в 19:11
Добрый день. Большое спасибо за информацию о таймере. Вы очень помогли мне. Благодарю! Но осталась маленькая проблемка.. после дней часов минут и секунд прямо под ними тоже 4 поля для цифр и они все по нулям... Как это убрать? Подскажите, пожалуйста
Сергей 14.09.2013 в 00:23
Подскажите пожалуйста есть возможность данный плагин использовать для слеующей задачи. Запускать его с отщетом четырех часов, через каждые пол часа. Тоесть 4 часа отсчитал остановился потом черезпол часа опять на 4 часа и так в цикле.
Юлия 13.06.2013 в 20:58
что-то как-то у меня ну не получается... Напишите, плз, для особо одаренных по пунктам что-куда... какой будет код html? Заранее спасибо большое!!!
Тарас 16.06.2013 в 13:07
Скачайте исходники и посмотрите как там все сделано.
demon 29.05.2013 в 20:45
Тарас, так: <span class="position">\ <span class="digit static">0</span>\ </span> не получилось
demon 27.05.2013 в 20:39
поставил себе таймер но он показывает только до 99 дней, как сделать чтобы показывал до 999 дней - чтобы было три цифры ?
Тарас 29.05.2013 в 16:16
Если не ошибаюсь, то в эту конструкцию надо добавить заготовку для еще одной цифры... // Создание HTML разметки внутри контейнера $.each(['Days','Hours','Minutes','Seconds'],function(i){ $('<span class="count' this '">').html( '<span class="position">\ <span class="digit static">0</span>\ </span>\ <span class="position">\ <span class="digit static">0</span>\ </span>' ).appendTo(elem); if(this!="Seconds"){ elem.append('<span class="countDiv countDiv' i '"></span>'); } }); вот кусок кода для одной цифры: <span class="position">\ <span class="digit static">0</span>\ </span>
diehan 21.04.2013 в 20:10
А не подскажите как сделать, чтобы таймер отсчитывал определенное количество часов. Например 8 часов и потом остановился
cmd 07.04.2013 в 15:59
если осталось 111 дней будет показывать 11, не умеет 3 значные числа.
Алексей 07.02.2013 в 16:48
не работает с yootheme виджеткитом, конфликт с <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> как решить?
Тарас 20.02.2013 в 02:22
Даже не знаю... код то весь на jquery построен. Или виджеткит заменить или этот таймер на другой заменить.
Алексей 05.02.2013 в 16:11
как использовать счетчик на разных страницах для разных событий?
Тарас 20.02.2013 в 02:23
Для разных страниц, необходимо создать несколько аналогичных файлов script.js. Сомотрите последний раздел статьи.
Василий 22.01.2013 в 00:05
подскажите, можно ли с помощью вашего таймера сделать цикличный таймер? мне надо чтобы каждые сутки в 00.00.00 таймер начинал новый отсчет 24-х часов
Тарас 22.01.2013 в 01:31
Можно, смотрите первые блоки кода в разделе - Использование jQuery таймера. Нужно получать текущую дату и автоматически формировать строку: ts = new Date(2013, 01, 31), а точнее эти значения в функции: 2013, 01, 31 таймер всегда должен быть настроен на день впреред. Так как, фактически отсчитывать нужно будет до следующего дня.
Витали 19.10.2013 в 16:00
Здравствуйте. Объясните новичку как сделать таймер цикличным. т. е. как писал Василий, в полночь таймер должен начинать по новому отсчитывать 24 часа. Спасибо.
Тарас 20.10.2013 в 17:30
Дополнил статью... смотрите последний абзац.
Сергей 19.01.2013 в 19:53
ts = new Date(2013, 01, 31), Я поставил это мне надо что бы счетчик отсчитывал до 31 числа этого месяца, в замен он мне прописывает что 42 дня осталось... хотя осталось 12
Тарас 20.01.2013 в 01:08
месяц идет на 1 меньше: ts = new Date(2013, 0, 31)
stas 10.11.2012 в 19:51
помогите пожалуйста! как сделать что бы таймер можно было настраивать на определённую дату? очень нужна ваша помощь, никак не могу справиться спасибо
Тарас 11.11.2012 в 13:37
Определенную дату пишите в этой строке: ts = new Date(2012, 06, 1), файл script.js Важно помнить, что месяц идет на 1 меньше, то есть сейчас прописано событие на 1 июля.
Егор 07.09.2012 в 14:45
Здравствуйте. Работает отлично. Но есть один недочет, не знаю как его поправить. Поставил таймер на 1 января 2013 года, а в таймере не хватает одной цифры в графе "Дни", вместо 115 дней показывает 15 дней. Скрин http://img21.imageshack.us/i/image000ho.png/ Буду благодарен за помощь. Спасибо.
Тарас 08.09.2012 в 18:19
Здравствуйте! То что будет 3 значное число не учтено... Дело в этом участке кода, где создается разметка для цифр. // Создание HTML разметки внутри контейнера $.each(['Days','Hours','Minutes','Seconds'],function(i){ $('<span class="count' this '">').html( '<span class="position">\ <span class="digit static">0</span>\ </span>\ <span class="position">\ <span class="digit static">0</span>\ </span>' ).appendTo(elem); if(this!="Seconds"){ elem.append('<span class="countDiv countDiv' i '"></span>'); } });
Дмитрий 15.07.2012 в 17:53
Ниже IE9 - не работает!
Тимур 18.07.2012 в 21:12
Для этого надо исправить функцию init() Вот и сам код: function init(elem, options){ elem.addClass('countdownHolder'); // Creating the markup inside the container $.each(['Days','Hours','Minutes','Seconds'],function( var str = '<span class="count' this '">\ <span class="position">\ <span class="digit static">0</span>\ </span>\ <span class="position">\ <span class="digit static">0</span>\ </span>'; elem.append(str); }); }
Сергей 28.06.2012 в 21:04
А можно совсем для чайников объяснить? Я скачал демо-архив, хочу использовать именно его. Из какого именно файла мне взять код, чтобы прописать его на своей странице, где хочу видеть отсчёт?
Тарас 29.06.2012 в 16:59
Представим, что это ваша страница... <html> <head> <meta charset="windows-1251" /> <title>Пример</title> <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open Sans Condensed:300" /> <link rel="stylesheet" href="assets/css/styles.css" /> <link rel="stylesheet" href="assets/countdown/jquery.countdown.css" /> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> далее смотрите следующий коммент...
Тарас 29.06.2012 в 17:00
<body> <div id="countdown"></div> <p id="note"></p> <!-- JavaScript в самом конце, перед тегом /body --> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="assets/countdown/jquery.countdown.js"></script>
Тарас 29.06.2012 в 17:01
<script> $(function(){ var note = $('#note'), ts = new Date(2012, 06, 1), newYear = true; if((new Date()) > ts){ // Если события уже прошло... просто выводим отсчет от 10 дней ts = (new Date()).getTime() 10*24*60*60*1000; newYear = false; } $('#countdown').countdown({ timestamp : ts, callback : function(days, hours, minutes, seconds){ var message = ""; if(newYear){ message = "осталось к первому июля!"; } else { message = "осталось к 10 дням от этого момента!"; } note.html(message); } }); }); </script> </body> </html>
Тарас 29.06.2012 в 17:05
Дату события пишите в этой строке - ts = new Date(2012, 06, 1), Важно помнить, что месяц идет на 1 меньше, то есть сейчас прописано событие на 1 июля. Скачайте архив в начале этой статьи... распакуйте, в нем вы увидите то же самое... только дата другая. Если остались вопросы или непонятки пишите мне на email: tarik_alka[собака]mail.ru
theEnd 08.06.2012 в 21:18
А не подскажите как сделать так, что бы таймер не обновлялся после обновления стр. ?
Тарас 09.06.2012 в 19:59
ts = new Date(2012, 0, 1), Если в этой строке будет указана дата выше от текущей даты, то таймер не будет обновлятся... просто правильно внесите настройки.
Дмитрий 04.04.2012 в 10:34
А подскажите, как по окончанию счетчика внести изменения в базу mysql. Это вообще возможно? или хотя бы направление в котором думать. Заранее спасибо.
Тарас 05.04.2012 в 15:33
Все возможно. Направление -> jquery ajax, после вывода сообщения пользователю отправляем ajax запрос к серверу, на сервере php получает необходимые данные и вносит их в БД.
David 23.02.2012 в 12:53
Добрый день хочу узнать не могли бы вы выложить исходники? Проблема в том что от начала до конца сделал урок три раза и ничего не получается! Не заливается к тому же градиентом ((( странные проблемы каки-то!!
Тарас 23.02.2012 в 18:00
Выложил исходники в начале этой статьи.
Андрей 01.02.2012 в 02:24
А есть пример роботы?
Тарас 01.02.2012 в 20:38
Да, есть... Вот пример работы jquery таймера. Наслаждайтесь ))) http://demo.tutorialzine.com/2011/12/countdown-jquery/
Добавить комментарий
Просмотров: 67888