[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/Pi0nN0EAAAZ7SURBVHja7J1Nbxtl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');
	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 минут





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