Таймер обратного отсчета на странице. Часть 1 из 3

Различные акции для стимулирования посетителей веб проекта к каким-либо действиям очень популярны. Ограничения по времени великолепно действуют на людей, помогая им быстро и уверенно принимать решения. Очень полезным инструментом при организации акций является таймер обратного отсчета. Большие цифры, которые показывают неумолимо ускользающее время, являются отличным стимулятором. А по завершении отсчета таймер сам уберет ссылку, ведущую на страницу с отличным предложением.

Счетчик обратного отсчета

В данном уроке мы сделаем страницу с таймером обратного отсчета на основе плагина jQuery CountDown. В состав исходников включены два примера HTML страниц со счетчиком обратного отсчета (в темном и светлом варианте), а также PHP заготовка для них.

demosourse

Чтобы на странице установить счетчик необходимо создать следующую разметку HTML:

		<!-- Начало панели счетчика -->
		<div id="countdown_dashboard">
			<div class="dash weeks_dash">
				<span class="dash_title">недель</span>
				<div class="digit">0</div>
				<div class="digit">0</div>
			</div>

			<div class="dash days_dash">
				<span class="dash_title">дней</span>
				<div class="digit">0</div>
				<div class="digit">0</div>
			</div>

			<div class="dash hours_dash">
				<span class="dash_title">часов</span>
				<div class="digit">0</div>
				<div class="digit">0</div>
			</div>

			<div class="dash minutes_dash">
				<span class="dash_title">минут</span>
				<div class="digit">0</div>
				<div class="digit">0</div>
			</div>

			<div class="dash seconds_dash">
				<span class="dash_title">секунд</span>
				<div class="digit">0</div>
				<div class="digit">0</div>
			</div>

		</div>
		<!-- Завершение панели счетчика -->

Для каждой части счетчика задается набор из трех элементов в контейнере div: название  и две цифры. А все части располагаются  в общем контейнере.

Для элементов счетчика надо задать стили. Ниже приводится пример для темного варианта оформления (стили для светлого варианта вы можете посмотреть в исходниках):

#countdown_dashboard {
	height: 96px;
	margin-left: 125px;
}

.dash {
	width: 138px;
	height: 96px;
	background: transparent url('../images/dash.png') 0 0 no-repeat;
	float: left;
	margin-left: 2px;
	padding-left: 13px;
	position: relative;
	color: #333;
}

.weeks_dash {
	background: transparent url('../images/dark_weeks_dash.png') 0 0 no-repeat;
}

.days_dash {
	background: transparent url('../images/dark_days_dash.png') 0 0 no-repeat;
}

.hours_dash {
	clear: left;
	background: transparent url('../images/dark_hours_dash.png') 0 0 no-repeat;
}

.minutes_dash {
	background: transparent url('../images/dark_minutes_dash.png') 0 0 no-repeat;
}

.seconds_dash {
	background: transparent url('../images/dark_seconds_dash.png') 0 0 no-repeat;
}

.dash .digit {
	font: bold 52pt Verdana;
	font-weight: bold;
	float: left;
	width: 59px;
	text-align: center;
	position: relative;
}

.dash_title {
	display: none;
}

Для каждой части счетчика задается свой собственный фон в соответствии с задумкой оформления.

Теперь страница готова для подключения механизма счетчика. Подключаем необходимые файлы библиотеки jQuery и плагина:

<script language="Javascript" type="text/javascript" src="js/jquery-1.4.1.js"></script>
<script language="Javascript" type="text/javascript" src="js/jquery.lwtCountdown-0.9.5.js"></script>

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

// Инициализация таймера установкой смещения от текущего значения
jQuery(document).ready(function() {
	$('#countdown_dashboard').setCountDown({
		targetOffset: {
			'day': 		1,	//дней 
			'month': 	1,	//месяцев
			'year': 	0,	//лет
			'hour': 	1,	//часов
			'min': 		1,	//минут
			'sec': 		1	//секунд
		}
	});
});

или заданием абсолютного значения времени

// Инициализация таймера установкой абсолютного значения времени
jQuery(document).ready(function() {

	$('#countdown_dashboard').setCountDown({
		targetDate: {
			'day': 		15,	//число
			'month': 	1,	//месяц
			'year': 	2011,	//год
			'hour': 	12,	//час
			'min': 		0,	//минуты
			'sec': 		0	//секунды
		}
	});
});

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

// Устанавливаем счетчик на 5 секунд
jQuery(document).ready(function() {
	$('#countdown_dashboard').countDown({
		targetOffset: {
			'day': 		0,
			'month': 	0,
			'year': 	0,
			'hour': 	0,
			'min': 		0,
			'sec': 		5
		}, 
		// По завершении счета будет выскальзывать панель #complete_info_message
		onComplete: function() { $('#complete_info_message').slideDown() }
	});
});

Можно исключить вывод количества недель, если значение счетчика не настолько большое:

// Устанавливаем счетчик
jQuery(document).ready(function() {
	$('#countdown_dashboard').countDown({
		targetOffset: {
			'day': 		0,
			'month': 	0,
			'year': 	1,
			'hour': 	0,
			'min': 		0,
			'sec': 		3
		},
		omitWeeks: true	// Отключаем вывод количества недель
	});
});

Счет можно остановить, продолжить, а также сбросить к нужному значению:

// Устанваливаем счетчик
jQuery(document).ready(function() {
	$('#countdown_dashboard').countDown({
		targetOffset: {
			'day': 		1,
			'month': 	1,
			'year': 	0,
			'hour': 	1,
			'min': 		1,
			'sec': 		1
		}
	});
});

// Останавливаем счет
function stop() {
	$('#countdown_dashboard').stopCountDown();
}

// Запускаем счет
function start() {
	$('#countdown_dashboard').startCountDown();
}

// Сброс счетчика
function reset() {
	$('#countdown_dashboard').stopCountDown();
	$('#countdown_dashboard').setCountDown({
		targetOffset: {
			'day': 		1,
			'month': 	1,
			'year': 	0,
			'hour': 	1,
			'min': 		1,
			'sec': 		1
		}
	});				
	$('#countdown_dashboard').startCountDown();
}

На одной странице можно запустить несколько счетчиков:

jQuery(document).ready(function() {
	// Устанавливаем первый счетчик
	$('#countdown_dashboard').countDown({
		targetOffset: {
			'day': 		1,
			'month': 	1,
			'year': 	0,
			'hour': 	1,
			'min': 		1,
			'sec': 		5
		}
	});

	// Устанавливаем второй счетчик
	$('#countdown_dashboard2').countDown({
		targetOffset: {
			'day': 		10,
			'month': 	1,
			'year': 	0,
			'hour': 	6,
			'min': 		34,
			'sec': 		10
		}
	});
});

В счетчиках также можно использовать время UTC (универсальное координированное время), указав явно специальную опцию:

// Инициализация счетчика
jQuery(document).ready(function() {
	$('#countdown_dashboard').countDown({
		targetDate: {
			'day': 		17,
			'month': 	12,
			'year': 	2010,
			'hour': 	01,
			'min': 		0,
			'sec': 		0,
			// Используем время UTC
			'utc':		true
		}
	});
});

В функции-обработчике события onComplete определяются все действия, которые надо сделать при завершении отсчета. Например, удаляются элементы счетчика и ссылка на страницу с предложениями из структуры документа, а вместо них выводится надпись о завершении акции.

В следующих уроках мы представим бесплатные плагины для WordPress и Joomla для организации таймеров обратного счета. Использование CMS и плагинов дает возможность организоваывть такие акции даже тем, кто очень слаб в применении JavaScript, HTML и CSS.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.littlewebthings.com/projects/countdown/
Перевел: Сергей Фастунов
Урок создан: 13 Июня 2011
Просмотров: 116237
Правила перепечатки


5 последних уроков рубрики "jQuery"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 13 Июня 2011 19:16
    da_lamber
    Простой и хороший скрипт. К тому же прикоьнуло про обратный отсчет конца света.
  • 13 Июня 2011 20:10
    genixxx
    Мне тоже понравилось, и я придумал одно удобное для себя применение этому. Спасибо!
  • 13 Июня 2011 20:41
    Gadzh
    спасибо! а можно чтоб по окончанию счетчика, отображалось сообщение, и начинался новый отсчет по заданному времени?
    • 18 Августа 2013 00:52
      kirillkor
      написано же все
  • 13 Июня 2011 20:55
    Вячеслав Качурин
    А что так долго новые уроки появляются?
    • 13 Июня 2011 23:29
      zeka112
      Наверное Жека на море ездил))
      • 14 Июня 2011 01:47
        BenLaden
        Автор не Женя.
  • 13 Июня 2011 22:44
    gorizont
    Скрипт хороший, а как поставить два скрипта на одну страницу с разным отсчётом времени?
  • 14 Июня 2011 00:33
    Ygreec
    Нормально, можно найти применение!
  • 14 Июня 2011 03:58
    Abdukhafiz
    Привет всем... Не знаете, что надо делать, при открытие JavaScript-овский скрипт в IE он не зпращивал разрещение типа, как Active X? Abdukhafiz@gmail.com
  • 14 Июня 2011 10:06
    GCDner
    Отлично!
  • 14 Июня 2011 11:10
    shamil95
    Можно применить для открытие сайта
  • 14 Июня 2011 17:36
    vUdav
    Клас, может пригодиться! Только вот в строчке: "Плагин тестировался в браузерах IE 6, IE 7, IE 8, FF 3, Safari 4, Opera 9, Chrome 4" Хром наверное всё таки не 4 а 12 версия
  • 14 Июня 2011 23:57
    rubyx
    Всегда нужная вещь для закрытия или открытия чего-то:) Спасибо!
  • 16 Июня 2011 15:41
    Madagaskar
    Подскажите как скрыть контейнер недели. Я его вырезаю, счетчик перестает работать.
  • 16 Июня 2011 17:06
    Vasek91
    А все заметили, что при изменение времени на компьютере и последующем обновление страницы происходит и обновление счетчика))) Как сделать так, чтобы посетитель не мог влиять на таймер???
  • 23 Июня 2011 17:11
    kushiy
    В функции complete_info_message должно производится что будет после отсчета времени, а где само описание этой функции Мне к примеру надо, чтобы после 60 секунд показывалась ссылка. Это можно сделать?
    • 5 Марта 2012 18:46
      uspehdin
      Подскажите было ли решение? У меня тоже никак не выводиться сообщение
    • 6 Марта 2012 17:55
      uspehdin
      Получилось ли выводить сообщение?
  • 6 Августа 2011 00:57
    val777
    1- Как мне добавить месяц и год для отсчёта? 2- Как мне зделать отсчёт от введённой через <input type="text" /> или <select><option></option></select> даты? 3- Интересует ответ на вопрос "Vasek91" "16 Июня 2011 17:06" 4- Интересует ответ на вопрос "kushiy" "23 Июня 2011 17:11" Спасибо, жду ответов.
  • 2 Сентября 2011 19:00
    mikola35
    Как его на UCOZ поставить ?
  • 7 Сентября 2011 18:20
    sandi
    Удалено.
  • 16 Сентября 2011 11:27
    sandi
    Подскажите пожалуйста чтобы этот таймер на джумле заработал, код вставил и css в стилях прописал может конфликт jquery есть, и как его устранить а так одни нолики на циферблате
  • 15 Декабря 2011 12:32
    mugur
    Хороший скрипт почему тока не выполняется событие по окончании счетчика. Пожалуйста подскажите как сделать. Как в уроке делал. Ничего не происходит.
  • 28 Декабря 2011 15:42
    PRsam
    А кто может подсказать как в этом плагине выводить рисунок вместо значения то есть вместо "1" отобразить подготовленную картинку 1.gif
  • 16 Января 2012 01:11
    Aidar_Indigo
    У меня возникла проблема, мне надо вставить таймер, что я делаю, а там такое: цифры отчета выходя за края поля, как быть? Хелп ми плииииз:)
    • 21 Января 2012 00:14
      ihor_shevchuk
      аналогічна проблема...
  • 27 Января 2012 17:24
    Вадюха Саросек
    Если долго не обновлять страничку с таймером , то секундные цифры сползают вниз ((
    • 21 Июня 2014 20:41
      TonyShow
      У div блоков цифр с классом "digit" - в стилях css допишите .digit {overflow: hidden; height: 83px;}
  • 5 Марта 2012 18:44
    uspehdin
    1. Никак не получается выводить сообщение после того как счетчик отработал свое время. Должно появляться сообщение но оно не появляется. Как или что нужно сделать чтобы выводилось сообщение или ссылка. Делел все по инструкции но ничего это НЕ работает. 2. Также если страница долго не обновляется, то цифры начинают "сползать вниз" как это решить?
    • 14 Июня 2012 07:50
      reshetovan
      тоже чуточку помучилась с этим. нужно добавить контейнер с id "complete_info_message" там, где вы его планируете выводить. например: <!-- Завершение панели счетчика --> <div class="info_message" id="complete_info_message" style="display: none;">Время истекло!</div> Если нужно ещё и скрыть сам счетчик, то надо дописать: onComplete: function() { $('#complete_info_message').slideDown(), $('#countdown_dashboard').hide()}
  • 25 Мая 2012 11:46
    evgeniy88
    Всем здравствуйте! Народ, может мне кто помочь в одном вопросе: Ставлю этот скрипт на Joomla. Когда добавляю в index.php все замечательно работает. Но мне не нужен один таймер на всех страницах. Я установил магазин VirtueMart и хочу к каждому товару устанавливать свой таймер. Но вот в чем проблема, после того как я вставляю код таймера, у меня на странице выводятся только первые цифры из двух. Т.е., если это [|] - минуты, то показываются,например, так [4|]. В общем, окошко, отвечающее за единицы вообще не показывается. А окошко, отвечающее за десятки, тем не менее, работает. А скрипт, отвечающий за конечную дату просто выводится рядом: jQuery(document).ready(function() { $('#countdown_dashboard').countDown({ targetDate: { 'day': 21, 'month': 12, 'year': 2013, 'hour': 17, 'min': 34, 'sec': 15 } }); }); Кто-нибудь знает в чем проблема? Я в этих делах еще пока новичок, так что буду рад любым советам. Все заранее спасибо!
  • 31 Мая 2012 16:59
    rape_me_now
    на гугл сайтах можно создать такой счётсчик ? у меня не получается , но желание есть ! !! =)
  • 15 Июня 2012 18:32
    singleton
    Вопрос такой: а каким образом можно сделать, чтобы корректно отображались трехзначные значения чисел в таймере? Потому что для интервала не 80, а в 120 (к примеру) дней, получаются сбои в верстке. Что нужно менять в CSS? Заранее спасибо за ответ.
  • 15 Августа 2012 00:45
    dimaloll
    добрый день! Этот таймер у меня работает успешно, но вот под Ubuntu 12.04, в Браузере Chrome цыфры просто стоят, хотя весь js выполняется, без ошибок. А вот недавно заметил такой аспект, в chrome под Win 7. При єтом консоль js не показывает никаких ошибок. в чем может быть проблемма??? Подскажите пожалуйста!!
  • 12 Сентября 2012 18:15
    Ярик Яровой
    А как сделать так что бы таймеры у разных пользователей шли не зависимо, то-есть у одного может быть он запущен позже а у другого раньше и будут разные значение.
  • 30 Сентября 2012 02:52
    anutka030686
    скрипт действительно хороший! но вот один вопрос - а как мне отменить вывод недель если я задаю абсолютное значение времени??? программа в этом случае ошибку выдает
  • 6 Ноября 2012 16:57
    jeepers54
    Помогите! На одной странице, скрипт работает, а если я его же перекидываю на другую страницу (при этом убирая его с другой), то он не работает совсем. Всё отображается, но не работает
  • 7 Ноября 2012 13:43
    syblex
    Косячит скрипт: сегодня 7 ноября 2012. Ставлю в скрипте, 31.12.2012-23.59.59 - сколько осталось до нового года. Скрипт выводит "3 недели, 3 дня и т.д.", что не соответствует правде. Если поменять время на 1 секунду больше, то всё становится ок.
  • 28 Ноября 2012 17:19
    vadim_berdyansk
    Не получается использовать его для показа времени до нового года... пробовал вариантом с указанием конкретной даты - он совершенно не то показывает... подскажите пожалуйста...
  • 8 Декабря 2012 15:58
    archi_289
    Ребят, хочу на дату 1.12.2013 установить счетчик, так он стоит вообще, а до этого работал, что делать?
  • 2 Февраля 2013 20:40
    alzam
    урок поверхностный и не информативный. многие функции не работают. при перезагрузке страницы счетчик сбрасывает на исходное значение. как установить только отсчет времени независимо от даты - не указано. видно этот урок не тестирован
  • 15 Марта 2013 11:55
    TroL929
    Обновите дату в примере, а то "конец света" уже настал и счетчик обнулился
  • 21 Апреля 2013 00:20
    Дмитрий Григоренко
    Подскажите плиз как сделать редирект когда счётчик закончит отсчёт редирект надо сделать на страницу webinar.php
  • 9 Июня 2013 16:30
    ВасилийПупкин
    Расскажите как вообще все это подключать? Куда эту разметку девать? Куда файлы из архива вставлять? Никогда не подключал таких вещей к сайту, поэтому не знаю
    • 15 Августа 2013 01:14
      klimentino
      Если вы н и разу это не делали сами, то не стоит мучаться, либо отдайте программисту, либо спросите на форуме http://javascript.ru/forum
  • 29 Июня 2013 02:26
    Mefistofel95
    Поставьте таймер на какое-нибудь другое событие, этот уже обнулился.
    • 30 Июня 2013 00:28
      sadchenko
      Ага, автор видать расчитывал что всем хана будет и смысла ставить больше не было
  • 29 Июля 2013 01:45
    Apostol511
    Ребята что делать? Уменьшил таймер. Перенес его с исходника к себе на сайт и вот что получилось! http://www.youtube.com/watch?v=bfUaDpvsLsg&feature=youtu.be Ребят помогите, заранее спасибо!
    • 8 Августа 2013 23:31
      andrdov
      как вы его уменьшили?
  • 22 Августа 2013 14:45
    mmkulikov
    Понравилось, поставил у себя на сайте, вроде все работает, только одна проблема - единицы секунд идут нормально, а при изменении других цифр происходит какая-то ерунда. Блоки на момент смены "едут" в другую сторону. Кто может помочь, вот ссылка av-host.net
  • 23 Августа 2013 16:49
    niilitmash
    Здравствуйте! Подскажите пожалуйста, уже третий день мучаюсь. Таймер стоит на нулях. Где и что надо отредактировать чтобы начался отсчет? Я поменял дату с 2012 на 2013г таймер начал отсчитывать время но только локально на компьютере, загружаю сайт на хостинг таймер стоит на нулях?
    • 23 Августа 2013 18:09
      mmkulikov
      Опишите вот здесь http://av-host.net/support/ticket/ проблему - постараюсь помочь.
  • 5 Сентября 2013 14:25
    soledar10
    Здраствуйте! Подскажите как реализовать в данном слайдере, чтобы он при каждой перезагрузке не принимал исходное значение, также чтобы после окончания , он вновь начинал отсчет до указанной даты или времени. Заранее спасибо!
  • 11 Октября 2013 12:46
    dr.shevy
    Как сделать чтобы можно было просто задать для таймера значение, например: ставим 7 дней 5 часов 0 мин 0 сек, и чтобы по истечению этого времени таймер обнулился и опять начал отстчитывать это же время, еще на такой же период времени
  • 1 Ноября 2013 15:44
    LilyT
    Спасибо за доступное обучение по счетчику. Скажите плз как сделать его индивидуальным? Чтоб при перезагрузке страницы он продолжал отсчитывать время, а не запускался заново? И работает ли функция оnComplete? Не получается ее настроить.
  • 10 Января 2014 23:27
    rin436
    Большое спасибо за счетчик! - нашел то, что искал. Но у Вас НЕПРАВИЛЬНЫЙ СКРИПТ - с ним счетчик, не работает. Для первых двух настроек У Вас так - $('#countdown_dashboard').setCountDown({ А нужно так - $('#countdown_dashboard').сountDown({
  • 18 Января 2014 14:29
    Helen0104
    Может ли кто помочь установить куки на этот счетчик,чтобы при обновлении и закрытии браузера счетчик не обновлялся. Мой е-mail: Yelos@yandex.ru
  • 30 Марта 2014 18:50
    Stranger1979
    Вот тут http://www.presentyou.ru еще одна реализация бесплатного таймера. Функционал довольно неплохой, можно использовать несколько таймеров на странице.
  • 5 Октября 2014 06:15
    giv1302
    Это точно не для моего ума. Так и не понял что к чему)) Народ не парьтесь с подключением таймеров. Сейчас уже можно все онлайн сделать и не видеть этот ужасный код)) Я, к примеру пользуюсь сервисом e-timer.ru. Крутой таймер для сайта. Настроил все, как тебе надо и скопировал код себе на сайт. Делов на 2 минуты) А тут..
  • 12 Августа 2015 11:58
    san_virtuoz
    А как теперь сделать, что бы после каждого обновления браузера, счетчик обнулялся? К примеру идет отсчет полторы минуты, обновляем браузер и снова отсчет идет полторы минуты.
  • 2 Ноября 2016 02:58
    asmith00712
    Отличная статья, но слишком сложно для меня. Я нашел сервис бесплатный для генерации gif таймеров обратного отчета, http://countdownmail.com там 100k бесплатно, плюс можно в емайлы вставлять
^ Наверх ^