Говоря о таймере обратного отсчета следует учесть тот факт, что таймеры делятся на два вида, точнее сказать, их употребление бывает разное. В одном случае счетчику задается конечная дата, в другом же задается количество времени, отсчет ведется для каждого пользователя отдельно (этот вариант подходит для тех, кто проводит какие-то акции или скидки).
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>
Советую обратить внимание на более усовершенствованный, бесплатный таймер с админпанелью и видеоинструкцией, скачать можно здесь.
Вот и все, остались вопросы — задаем в комментариях.
