Форум

yintar · #1 (**permalink**) 31.08.2014, 18:06

Всем привет!!!

На странице нужно сделать несколько таймеров обратного отсчета.Время берется серверное.

Код:

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 передается время в скрипт для таймера.
Подскажите пожалуйста как решить проблему

krasovsky · #2 (**permalink**) 01.09.2014, 09:07

Вау, клево оформлено. Видно - дизайнер поработал.

yintar · #3 (**permalink**) 02.09.2014, 15:19

блин и это ответ??

tsigel · #4 (**permalink**) 02.09.2014, 15:22

yintar,
Вы опубликовали очень много кода.

Пожалуйста, локализуйте проблему!

Выделите фрагмент кода, по которому есть вопрос и опубликуйте его отдельно.

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

Спасибо.

P.S. код форматируют специальные теги [ js ] ... [/js], [ html ] ... [/html] и другие аналогичные, сам. http://javascript.ru/formatting

skrudjmakdak · #5 (**permalink**) 02.09.2014, 15:36

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

нажмите Ctrl + U, посмотрите что сгенерировал вам ваш пхп

yintar · #6 (**permalink**) 02.09.2014, 23:35

Я вроде писал
Как я полагаю проблема в этой строчке кода
Код:
echo $script .= '<script type="text/javascript">var timeleft=' . $time_value . ';</script>';
т.к. через переменную $time_value передается время в скрипт для таймера.Вот здесь в переменную $time_value передается последнее время и поэтому для всех таймеров оно общее а должно быть для каждого свое
Подскажите пожалуйста как решить проблему

tsigel · #7 (**permalink**) 03.09.2014, 11:16

yintar,
Ну попробуйте сделать так:

echo $script .= '<script type="text/javascript">var timeleft= [' . $time_value1 . ', '. $time_value2 . '] ;</script>';

Форум

Справочник

Discord чат

Курсы javascript