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

Говоря о таймере обратного отсчета следует учесть тот факт, что таймеры делятся на два вида, точнее сказать, их употребление бывает разное. В одном случае счетчику задается конечная дата, в другом же задается количество времени, отсчет ведется для каждого пользователя отдельно (этот вариант подходит для тех, кто проводит какие-то акции или скидки).

1. HTML

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

<div id="countdown">
	<div id="week">недель: <span>00</span></div>
	<div id="day">дней: <span>00</span></div >
	<div id="hour">часов: <span>00</span></div >
	<div id="minute">минут: <span>00</span></div >
	<div id="second">секунд: <span>00</span></div >
</div>

2. CSS

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

Сначала подключим свой шрифт с Google Fonts:

@import url(//fonts.googleapis.com/css?family=Open+Sans+Condensed:300&subset=latin,cyrillic);

Задаем стандартные параметры для документа:

html,body {
	margin:0px;
	padding:0px;
	font-family:'Open Sans Condensed',Arial,serif;
}

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

#countdown {
	margin:0px auto;
	width:auto;
	padding:20px 20px 20px 10px;
	position:relative;
	border:#222 2px solid;
	background:#eee;
}
#countdown div {
	margin:0px 0px 0px 10px;
	float:left;
	width:88px;
}
#countdown div span {
	display:block;
	height:53px;
	background:#000;
	border-bottom:#f00 1px solid;
	color:#eee;
	font-size: 24pt;
	padding-top: 4px;
	padding-left: 16px;
	letter-spacing: 31px;
	/* Последние 4 параметра отвечают за размер текста и его выравнивание на циферблате */
}
#countdown #week,#countdown #day,#countdown #hour,#countdown #minute,#countdown #second {
	display:none;
}
.clear {
	clear:both;
	float:none !important;
}

3. PHP

Как и говорилось ранее, в таймере предусмотрим два варианта, это отсчет времени к определенной дате (например, 1 мая 2018 года) и таймер по заданному времени (например, 12 часов). Этот выбор мы сделаем в настройках скрипта.

$countdown_setting = array(
	"type" 			=> "date", /* date или time, date - отсчет до указанной даты, time - отсчет указанного времени */
	"cookie" 		=> true, /* true или false, запоминать время, только для режима time */
	"position"	    => "vertical", /* horizontal или vertical, положение блока */
	"date"			=> array(
		"year" 		=> 2014,
		"month" 	=> 4,
		"day"		=> 15,
		"hour"		=> 12,
		"minute"	=> 0,
		"second"	=> 0
	), /* указывается конечная дата, для режима date */
	    "time" 		=> array(
		"week"		=> 0,
		"day"		=> 2,
		"hour"		=> 10,
		"minute"	=> 0,
		"second"	=> 0
	), /* указывается время, для режима time */
		"visible"	=> array(
		"week"		=> array("none","недель:"),
		"day"		=> array("block","дней:"),
		"hour"		=> array("block","часов:"),
		"minute"	=> array("block","минут:"),
		"second"	=> array("block","секунд:")
	) /* настройка отображения блоков, block - показывать соответствующий блок, none - не показывать; второй параметр - заголовок блока */
);

Поскольку видимость блоков (дни, минуты и т.д.) задается в конфиге, необходимо сделать генерацию html-кода:

$script = '';
$countdown_txt = '';
$block_count = 0;
/* Генерация html кода таймера */
foreach($countdown_setting['visible'] AS $i => $v) {
	$countdown_txt .= '<div id="'.$i.'" style="display:'.$v[0].';">'.$v[1].' <span>00</span></div>';
	$script .= '<script type="text/javascript">var countdown_'.$i.' = "'.$v[0].'";</script>';
	if($v[0] == 'block') $block++;
}
if($countdown_setting['position'] == 'vertical') $block = 1; 
$script .= '<script type="text/javascript">var block_count = '.$block.';</script>';

Обработку времени будем делать на PHP с учетом серверного времени, чтобы время не зависело от настроек времени конечного пользователя, как это бывает при использовании Javascript:

/* обработка, когда указано время отсчета */
if($countdown_setting['type'] == 'time') {
	$time_value = $countdown_setting['time']['week']*7*60*60*24+$countdown_setting['time']['day']*60*60*24+$countdown_setting['time']['hour']*60*60+$countdown_setting['time']['minute']*60+$countdown_setting['time']['second'];
	$time_new = $time+$time_value;
	/* обработка кукисов */
	if($countdown_setting['cookie']) {
		$time_cookie = (int) $_COOKIE['time'];
		if($time_cookie==0) {
			setcookie("time",$time_new);
		} else {
			$time_value = $time_cookie-$time;
		}
	}
	$script .= '<script type="text/javascript">var timeleft='.$time_value.';</script>';
} elseif ($countdown_setting['type'] == 'date') { /* обработка, когда указана конечная дата */
	$time_value = mktime($countdown_setting['date']['hour'],$countdown_setting['date']['minute'],$countdown_setting['date']['second'],$countdown_setting['date']['month'],$countdown_setting['date']['day'],$countdown_setting['date']['year']);
	$time_value = $time_value-$time;
	$script .= '<script type="text/javascript">var timeleft='.$time_value.';</script>';
}

4. Javascript

Первое что нам необходимо, это подключить фреймворк jQuery (о способах подключения можно почитать здесь)

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>

Опишем функцию countdown_go(), она будет отвечать за вывод времени в блоки. При знаниях JS, функцию можно оптимизировать.

function countdown_go() {
	timeleft_func = timeleft;
	if(countdown_week=='block') {
		timevalue = Math.floor(timeleft_func/(7*24*60*60));
		timeleft_func -= timevalue*7*24*60*60;
		if(timevalue<10) timevalue = '0'+timevalue;
		$("#week span").html(timevalue);
	}
	if(countdown_day=='block') {
		timevalue = Math.floor(timeleft_func/(24*60*60));
		timeleft_func -= timevalue*24*60*60;
		if(timevalue<10) timevalue = '0'+timevalue;
		$("#day span").html(timevalue);
	}
	if(countdown_hour=='block') {
		timevalue = Math.floor(timeleft_func/(60*60));
		timeleft_func -= timevalue*60*60;
		if(timevalue<10) timevalue = '0'+timevalue;
		$("#hour span").html(timevalue);
	}
	if(countdown_minute=='block') {
		timevalue = Math.floor(timeleft_func/(60));
		timeleft_func -= timevalue*60;
		if(timevalue<10) timevalue = '0'+timevalue;
		$("#minute span").html(timevalue);
	}
	if(countdown_second=='block') {
		timevalue = Math.floor(timeleft_func/1);
		timeleft_func -= timevalue*1;
		if(timevalue<10) timevalue = '0'+timevalue;
		$("#second span").html(timevalue);
	}
	timeleft-=1;
	return false;
}

Последнее, что осталось, это запустить таймер, здесь используем стандартную функцию setInterval().

$(document).ready(function() {
	setInterval(countdown_go,1000);
	$("#countdown").css('width',(block_count*98)+'px');
	return false;
});

Посмотреть ДЕМО и скачать ИСХОДНИКИ.

Как установить на сайт?

Если вы не хотите разбираться и устанавливать, можете просто скачать исходники, создать на сайте папку countdown и залить туда файлы. А далее на сайт вставить через фрейм:

<iframe src="ваш_сайт/countdown/index.php" width="указать высоту" height="указать ширину" frameborder="0"></iframe>

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

Вот и все, остались вопросы – задаем в комментариях.

Может быть полезно