Таймер обратного отсчета на странице. Часть 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
Просмотров: 122089
Правила перепечатки

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

^ Наверх ^