javascript - 将 Jquery 时间计数器乘以数据库行查询结果

Question

我有这个 JavaScript 用于显示时间计数器:

$(function(){

        var note = $('.note'),
        ts = new Date(<?php echo $tgl_close1; ?>),
        newYear = true;

    if((new Date()) > ts){
        newYear = false;
    }

    $('.countdown').countdown({
        timestamp   : ts,
        callback    : function(days, hours, minutes, seconds){
            var message = "";
            message += days + " hari" + ( days==1 ? '':'' ) + ", ";
            message += hours + " jam" + ( hours==1 ? '':'' ) + ", ";
            message += minutes + " menit" + ( minutes==1 ? '':'' ) + ", ";
            message += seconds + " detik" + ( seconds==1 ? '':'' ) + " <br />";
            note.html(message);
        }
    });

});

我从数据库中获取$tgl_close值。如果我只从表中调用 1 行，它工作正常，但我需要根据数据库查询的结果创建一个乘法时间计数器。

这就是我的 table 的样子:

id    |      tgl_close1     |   idrek
1     | 2014-11-25 08:00:00 |      1
2     | 2014-11-26 10:00:00 |      1
3     | 2014-11-26 12:10:00 |      1

我尝试了一种愚蠢的方法，将 JavaScript 插入到 foreach 循环中，但它不起作用。这就是我尝试的方法:

<?php 
$fetch = mysql_query("select tgl_close1
                      from tba
                      where idrek = 1");

/* Retrieve and store in array the results of the query.*/
while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
    $tgl_close1[] = date("Y, n-1, j, G, i, s", strtotime($row['tgl_close1']));


}
foreach ($tgl_close1 as $tglclose){
 ?>
<br>
    <table border="0"><tr><td>
    <div class="countdown"></div>
    <p class="note"></p>    
    </td></tr></table>

    <!-- JavaScript includes -->
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="assets/countdown/jquery.countdown.js"></script>
    <script type="text/javascript">
    $(function(){

        var note = $('.note'),
        ts = new Date(<?php echo $tgl_close; ?>),
        newYear = true;

    if((new Date()) > ts){
        newYear = false;
    }

    $('.countdown').countdown({
        timestamp   : ts,
        callback    : function(days, hours, minutes, seconds){
            var message = "";
            message += days + " hari" + ( days==1 ? '':'' ) + ", ";
            message += hours + " jam" + ( hours==1 ? '':'' ) + ", ";
            message += minutes + " menit" + ( minutes==1 ? '':'' ) + ", ";
            message += seconds + " detik" + ( seconds==1 ? '':'' ) + " <br />";
            note.html(message);
        }
    });

});

</script>
<?php
}
}
mysql_close($conn);
?>

有人可以告诉我该怎么做吗？

Answer 1

我没有地方对此进行测试，并且我不确定您希望最终的 html 输出是什么样子，但我认为这应该会让您接近:

<!-- JavaScript includes -->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="assets/countdown/jquery.countdown.js"></script>
<?php 
$fetch = mysql_query("select tgl_close1
                      from tba
                      where idrek = 1");

/* Retrieve and store in array the results of the query.*/
while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
?>
<br>
<table border="0"><tr><td>
    <div class="countdown" data-ts="<?php echo date("r", strtotime($row['tgl_close1'])); ?>"></div>
    <p class="note"></p>    
</td></tr></table>


<?php
}
}
mysql_close($conn);
?>
<script type="text/javascript">
    $(function(){

        $('.countdown').each(function() {
            var $this = $(this),
                ts = new Date($this.data('ts')),
                newYear = new Date() <= ts;
            $this.countdown({
                timestamp   : ts,
                callback    : function(days, hours, minutes, seconds){
                    var message = "";
                    message += days + " hari" + ( days==1 ? '':'' ) + ", ";
                    message += hours + " jam" + ( hours==1 ? '':'' ) + ", ";
                    message += minutes + " menit" + ( minutes==1 ? '':'' ) + ", ";
                    message += seconds + " detik" + ( seconds==1 ? '':'' ) + " <br />";
                    $this.next().html(message);
                }
            });
        });

    });

</script>