таймер обратного отсчета
Всем привет!!!
На странице нужно сделать несколько таймеров обратного отсчета.Время берется серверное.
Код:
class DateAndTime {
public function addTimer($year, $month, $day, $hour, $minute, $second) {
// print_r($day.'</br>');
$countdown_setting = array(
"type" => "date", /* date или time, date - отстет до указанной даты, time - отсчет указанного времени */
"cookie" => true, /* true или false, запоминать время, только для режима time */
"position" => "vertical", /* horizontal или vertical, положение блока */
"date" => array(
"year" => $year,
"month" => $month,
"day" => $day,
"hour" => $hour,
"minute" => $minute,
"second" => $second
), /* указывается конечная дата, для режима date */
"visible" => array(
"week" => array("none", "недель:"),
"day" => array("block", "дней:"),
"hour" => array("block", "часов:"),
"minute" => array("block", "минут:"),
"second" => array("block", "секунд:")
) /* настройка отображения блоков, block - показывать соответствующий блок, none - не показывать; второй параметр - заголовок блока */
);
$time = time();
$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++;
}
$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;
echo $time_value;
echo $script .= '<script type="text/javascript">var timeleft=' . $time_value . ';</script>';
return $countdown_txt;
}
}
?>
html разметка
Код:
<!DOCTYPE html>
<html lang="ru-RU">
<head>
<meta charset="UTF-8">
<title>Таймер обратного отсчета - Демо</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/countdown-1.0.1.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="css/style.css" />
</head>
<body>
<!-- Таймер (начало) -->
<table>
<tr>
<?php
$db = new mysqli('localhost', 'root', '', 'sova');
$query = 'select * from pay';
$res = $db->query($query);
$num = $res->num_rows;
for ($i = 0; $i < $num; $i++) {
?>
<td>
<div id="countdown" style="float: left;margin: 150px">
<?php
$row = $res->fetch_assoc();
$timer = new DateAndTime();
// print_r($row['date'].'</br>');
?>
<?php
echo $timer->addTimer(date('Y', $row['date']), date('m', $row['date']), date('d', $row['date']), date('H', $row['date']), date('i', $row['date']), date('s', $row['date']));
?>
<?php } ?>
</div>
</td>
</tr>
</table>
<!-- Таймер (конец) -->
</body>
</html>
javascript код
Код:
function countdown_go() {
if(timeleft > 0) {
// alert(timeleft);
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;
if(timeleft == 0) {
alert('Время истекло ')
return false;
}
}
$(document).ready(function() {
setInterval(countdown_go,1000);
$("#countdown").css('width',(block_count*98)+'px');
return false;
});
т.е из базы данных для каждого таймера извлекается время ( $query = 'select * from pay') и передается в функцию :
Код:
echo $timer->addTimer(date('Y', $row['date']), date('m', $row['date']), date('d', $row['date']), date('H', $row['date']), date('i', $row['date']), date('s', $row['date']));
.
т.е. если у меня в БД 3 записи то у меня должно сгенерироваться 3 таймера обратного отсчета.Это так и происходит ,но проблема в том,что время у них у всех одинаковое и это время последней записи в БД (хотя в функцию addTimer() время передается для каждого таймера).
Как я полагаю проблема в этой строчке кода
Код:
echo $script .= '<script type="text/javascript">var timeleft=' . $time_value . ';</script>';
т.к. через переменную $time_value передается время в скрипт для таймера.
Подскажите пожалуйста как решить проблему |