[JavaScript] Таймер обратного отсчета

Возврат к списку

Таймер обратного отсчета для сайта

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

В этом уроке мы рассмотрим создание таймера обратного отсчета для сайта.Таймер мы будем разрабатывать на JavaScript.

В примере мы будем вести обратный отсчет до начала конференции INFOSTART EVENT 2014, которая начнется 29 октября 2014 года.

Код таймера:

<div id="clock-area">
	<div id="head-clock">До конференции INFOSTART EVENT 2014 осталось</div>
	<div id="clock"></div>
</div>

<script>
	function countdown(){
		var today = new Date().getTime();
		var end =  new Date(2014, 9, 29, 10, 00).getTime();
		var dateX = new Date(end-today);
		var perDays = 60*60*1000*24;
		if(end > today){
			date_to_write = '<div class="hlop">'+
					'<div class="sep">'+
						'<span id="ie-d">' + (Math.round(dateX/perDays) + '</span>'+
						'<div class="inf"><b>дней</b></div>'+
					'</div>'+
					'<div class="dot">:</div>'+
					'<div class="sep">'+
						'<span id="ie-h">' + dateX.getUTCHours().toString() + '</span>'+
						'<div class="inf"><b>часов</b></div>'+
					'</div>'+
					'<div class="dot">:</div>'+
					'<div class="sep">'+
						'<span id="ie-m">' + dateX.getMinutes().toString() + '</span>'+
						'<div class="inf"><b>минут</b></div>'+
					'</div>'+
					'<div class="dot">:</div>'+
					'<div class="sep">'+
						'<span id="ie-s">' + dateX.getSeconds().toString() + '</span>'+
						'<div class="inf"><b>секунд</b></div>'+
					'</div>'+
			'</div>');
		}else{
			date_to_write = '<div class="hlop"><div class="endtimer">Конференция уже началась</div></div>';
		}
		var result = document.getElementById('clock');
		result.innerHTML = date_to_write;
	}
	countdown();
	setInterval(countdown, 1000);
</script>

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

ДемоТаймерОбратногоОтсчета.jpg

Задаем стили:

#clock-area{
	display:inline-block;
}

#clock-area #clock{
	margin:0 auto;
	display:inline-block;
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
	background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
	border-radius: 0 0 10px 10px;
	-moz-border-radius:0 0 10px 10px;/* для firefox */
	-webkit-border-radius: 0 0 10px 10px;/* для Safari и Chrome */
	position:relative;
	padding:0 0 10px 0;

}

#clock-area #head-clock{
	background: #2f3855; /* Old browsers */
	font-size:20px;
	padding:10px;
	color:#ffffff;
	text-align:center;
	border-radius: 10px 10px 0 0;
	-moz-border-radius:10px 10px 0 0;/* для firefox */
	-webkit-border-radius: 10px 10px 0 0;/* для Safari и Chrome */
}

#clock-area #clock .sep{
	display:inline-block;

}

#clock-area #clock .sep .inf{
	text-align:center;
}

#clock-area #clock .sep .inf b{
	background: #2f3855;
	color:#ffffff;
	padding:2px 10px 2px 10px;
	border-radius: 5px;
	-moz-border-radius:5px;/* для firefox */
	-webkit-border-radius: 5px;/* для Safari и Chrome */
}

#clock-area #clock .sep #ie-d,
#clock-area #clock .sep #ie-h,
#clock-area #clock .sep #ie-m,
#clock-area #clock .sep #ie-s{
	margin:10px 10px 10px 10px;
	display:inline-block;
	width:119px;
	height:119px;
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHcAAAB3CAYAAAA5Od+KAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6N0Q0MjM0RkNFRDg0MTFFM0I5QzhCRTZDRkZBMEE5MDciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6N0Q0MjM0RkRFRDg0MTFFM0I5QzhCRTZDRkZBMEE5MDciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3RDQyMzRGQUVEODQxMUUzQjlDOEJFNkNGRkEwQTkwNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3RDQyMzRGQkVEODQxMUUzQjlDOEJFNkNGRkEwQTkwNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pi0nN0EAAAZ7SURBVHja7J1NbxtlFIWvxx6PJ/6OnaZOESmFQhESbBASoLKBHexaibLgP6Ag+AdsKtFfABI/gGUFC8SmLSBAiAVp09KWNimQOPZ4bMcf4/EX53XtkA+7rVTV8cTnSFeJ7fFEep+c8947iTy+5avXhDqcCjzuCSyrwFU8QKVSsyNf07g8U+xcODPo8/nO4Nuz3W73NXydR+lcurGrDg5Z1Iqmad/MzJhf67pu4fnmqDf4HrTnFgq2Anp+bi79TDqVkmg0IoZhCH4Al3rMarfb0mi4Uq1WJW9Zks9bWcC9ACZfKVSo1iPBhVv94Hc+lUotLWQyEo/HpLxVkXKlKk7NEbfVEkDnio9ZcKzoekBCIRhMulIulaRYLF2MxaKfwnB3cIjz0FhWYAF16fjxRanW6nLrzqq4bnPvMdSY1e12wMHtlZIeNCSZTLwHwCYAf4Snbu0ErA2J4vfTqfTSIsDmC0W5988GTqYc72NNWDWbbWl3NTg59HatVlvCk0/vNGxgb/OELxcymXmx7KJYBZsOnXCp/sfvD0ilUvnANM1LeFzC09l9cPHCOTRPCxoOtrJW/zeEmviRB/FsGKGQ4zgfAvAKnrJR7t4994zqinM5i471mIJosurV6sumKS/i4W1UPrB7w+6+6vNp0kTbzXHHW9L1oFTa5QS+fQl1ZR9c6Ei914kRrPfGJL90Oh3F8wQqMWwUCjQxKNO03mys+jqKSg6dc1udDiPZ21J/SYg94CIG4XpY4ZFwNe63XlcIFR0Kl6b1fuPcd+8wuKTrcfn77t0Pt0u4np+K+oDp3MM6GRHu9MHlyhwW0bmESxEuRbgU4VKESxEu4YpoZEvnUoRLES5FuNRjwuW/2RAu5clY5qJwz6XoXIrOpQiXIlxqOFxuumyoKMYyNVlweYWKzqW451LslinuuRRjmWIsT2MsUxyFqIkXb2AxTc69fOVHror3DWsMhfvW6Te5PB7Vpcs/DNqm4FC4yys3uUrelrqziMs5d+rmXA5DXtfoWKZzD0UsN+jcaYtlOvdQxLIxAi7pMpapSVWHo9B07rmkS7iU9+DyBhYchSjGMjVRcHkDCzqXIlyKDRVF51KESxEu4VKESxEuRbjUE4LLG1jQuRThUoRLES71uHD5bzaES3kylrko3HMpOpeicynCpQiXGg6Xmy4bKoqxTE0WXF6hOrxwO52O+P1+rozH1O12dz3cB1dFcrPVlECAcL0m13VF07TRcJVqdUdM0+RqeUyVWn2QuOoDT9pDnWsXCpKeneVqeUx2wRZd7+FUYJ2hzrXtomxtlSUWi3HFPKJyuSyFgiXhcEQ9bCkj74OrNuVUKiXrG1kJRyJsrDygdrvd4xWJRHvNMFQfwNX2xLKrDlDxvLZ6T9HuDUasyS3FqY4+6X4k9/ooBbY8LJZztm0fe+7ks7KZ3ZQbf96UhcxRicfjtMiEqVQqy7/r61JDI5VIxKVYLAJwUNG1R8DtriCWj+VzlhxfXJTNXF5Wrt+QZDIpacR1OBwWwwjyKtYBzbGNhivValXyloU9tiCxaEzm5tK954JBA7Hcxn7r3+gD3g1X0/zfIpbfUew2sll56tiCJJJxyQPy3dU1zFKNXsbvnpepcUn1QLquy8yMKQsLCxIyDCmhmXKchoRCBvh0ijjsL1Sxt80uX722/eZms5XZ2tpafuHU87MqltVQfHT+CN4YkgaG5FazJa1Wq7dxd4SExy31AXCKSSAQEBccSohitd/G4zEVyx1w+gmp+gUOvYjK73IuNuU86nPE8meDWFb7rorlWZSCrKKZOphYhvng0rpYiGT0RhJFh5xOp3qxDFdnAfYPHLoyqqFqRqPRL/Fb8EYwqL+7M5bX7v3NWJ6gWM5kMtuxjKaqZJqh33CIuinUXRn1kbyQFYtFP8nlcjHXdU+rWFaQG3OM5UmL5QLcW6lUS+HwzC94+XvUz4rf9mi7c8/doRDqJH4jPm40Gmdh/fAgltWJqYON5WKpJJZVaMKt64Zh/I6XL6G+Q6mbQjkPg6uk/nrwNE76uuM453DiVxDJSbg2KPw49QPhC9e2AgG/g3k2h5H0JvbYG3j+136t9a9ObetBNlQH3sYJbNM0r5qmnMLjE6h5VOQh76WejAbXjbP9kec6ahVV6L8mjwp3cLLN/lB8B5VAqXY5KPcvXdLBY3Su/H//gmp/li2pJnjUGx7VfeoE+X5RHtF/AgwAqiJRsVK5t1oAAAAASUVORK5CYII=');
	font-size:50px;
	font-weight:800;
	text-align:center;
	line-height	: 119px;
}

#clock-area #clock .dot{
	width:15px;
	font-size:50px;
	font-weight:800;
	text-align:center;
	display:inline-block;
	position:absolute;
	top:33px;
	margin-left:-8px;
}

#clock-area #clock .endtimer{
	text-align:center;
	min-width:500px;
	padding:20px;
	font-size:20px;
}

Демо счетчика можно увидеть здесь.

Скрипт легко интегрируется на любую страницу сайта, достаточно изменить значение переменной даты end , обязательно год должен быть из 4 цифр, а отсчет месяцев начинается с нуля 0. Например var end = Date(2014, 9, 29, 10, 00) - это 29 октября 2014 год 10 часов 00 минут





Возврат к списку

Теги
1c addurl AutoGRAPH.NET_Service Bitrix Bootstrap chmail.ru CMS curl DLE ERP Exel gmail google hdd hide html input Java script окна javascript Jquery JS JSON keywords mail.ru memori news.list No captcha nsma PHP php php attach PR recaptcha repair retweet script Sdorgen sdorgen select sms snagit Spam Test Twitter ucoz utf-8 VK wrike X-Satellite XHE xhe yandex yandex webmaster youtube АРМ БП3 Битрикс ВТБ24 ЕГРЮЛ ЖЖ ЗУП ИТС КЛАДР МБ-8 НДФЛ ПР ПФ ТИЦ УАТ УП автограф автокликер автоматизация автопостер ап ТИЦ битрикс валюты видео внешнее соединение время грамотное написание графика даты запрета день рождение дерево значений договор заказы заполнение ТЧ запонение ТЧ запрос 1С зарплатный реестр календарь книги кодировка комментарии координаты координирование проектов меню модальное окно народ обмен обработка ок рубль организационные структуры управления проектами остатки на складе отчет плавающий блок постинг программы для управления проектами расчет расстояния сервис система управления проектами скрипт скрыть блок смс софт таймер такси управление содержанием проекта фоновые задания чекер