Ещё один таймер обратного отсчета

В этой статье мы рассмотрим более гибкий таймер. Что нам нужно? Нам нужен таймер, который будет отсчитывать время до определенного дня. На момент написания статьи 25.02.2014, пусть он будет отсчитывать время до 01.04.2014

Данному таймеру необходимо указать сколько осталось дней, часов, минут и секунд до 01.04.2014. Как это сделать? Нам поможет php.

$end=mktime(00,00,00,4,1,2014);
/*
* Возвращает Unix timestamp, соответствующий заданным аргументам.
* Этот timestamp является длинным целым, содержащим
* количество секунд между началом Unix Epoch (January 1 1970) и
* специфицированным временем.
*
* То есть переменная $end будет показывать сколько прошло секунд
* с 1 января 1970 до 01.04.2014
* функция имеет следующий формат (часы,минуты,секунды,месяц,число,год)
*/


/* узнаем местное время
* серверное время отстает от нашего на 3 часа
* поэтому мы прибавляем их
* всё зависит от того на какой регион
* рассчитан таймер, нам нужно было наше время 
*/
$time=time()+(3*3600);

/* считаем разницу
* сколько в секундах осталось с нашего времени до 01.04.2014 
*/
$razniza=$end-$time;
if($razniza<=0):
	$days="0";
	$hours="0";
	$minutes="0";
	$seconds="0";
else:
/* переводим в нужный нам формат 
* то есть переводим секунды в дни, часы, минуты, секунды
*/	
        $days=floor($razniza/(24*3600));
	$hours=floor($razniza/3600-($days*24));
	$minutes=($razniza/60%60);
	$seconds=($razniza%60);
endif;

Оформляем страницу

<!DOCTYPE html>
<html><head>
<title>Таймер обратного отсчета</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
<script src="js/jquery.countdown.js" type="text/javascript"></script>
</head>
<body>

Для отображения времени будет использоваться картинка digits2_orange.png

Далее пишем js код

<script type="text/javascript">
$(function(){
	$('#counter').countdown({
	image: 'pic/digits2_orange.png',
	startTime: '<?=$days;?>:<?=$hours;?>:<?=$minutes;?>:<?=$seconds;?>',
	timerEnd: function(){
		$("#tut").html('Таймер завершил свою работу');
	}
	});
});
</script>

image - наша картинка
startTime - это как раз время оставшееся до 01.04.2014
timerEnd - то, что происходит по завершении работы таймера, в нашем случае в контейнер с идентификатором tut будет вставлена соответствующая надпись

Далее наш таймер

<div id="layer">
<h1>Осталось:</h1>
<div id="counter"></div>
	<div class="desc"><div id="days">Дней</div><div id="hours">Часов</div><div id="minutes">Минут</div><div id="seconds">Секунд</div>
</div>
<br style="clear:both;">
<h1 id="tut" style="color:#c70000;"></h1>
</div>
</body>
</html>

Оформляем

#layer{
width:600px;
text-align:center;
margin:0 auto;}
#counter{
margin:10pt auto 0 auto;
width:414px;}
.desc{
width:430px;
margin:0px auto;}
#days,#hours,#minutes,#seconds{
float:left;
font:13px Arial,Verdana,sans-serif;
width:50px;
margin-right:63px;
font-weight:bold;
color:#000;}
#seconds{margin-right:0px;}
.cntSeparator {
font-size:50px;
margin:6px 7px;
color:#000;}

Демонстрация