1

好的，所以我设法让一切运行起来——最后一件事。基本上，一个 jQuery+ajax 函数将日期增加 15 秒，并在 MySQL 中添加一个新行。我需要放入一个新行，以便获得历史记录的最后 5 行：

<?php 
include("inc/dblink.inc");
$itemid = intval($_POST['i']);
$bid = intval($_POST['b']);
$row = mysql_fetch_array(mysql_query("SELECT * FROM test WHERE itemid=$itemid ORDER BY bidid DESC LIMIT 0,1"));
$date = $row['date'];
$newdate = strtotime($date);
$newerdate = ($newdate + 15);
$newestdate = date("Y-m-d H:i:s", $newerdate);
mysql_query("INSERT INTO test (date,bid,itemid) VALUES ('$newestdate','$bid','$itemid')");
?>

第二个脚本每秒刷新一次并显示表中的数据。

<script type="text/javascript">
var auto_refresh = setInterval(
function()
{
$('#timeleft').load('gettime.php', { i: <?=$itemid;?> }).show();
$.ajax({
    type: "POST",
    url: "gettime.php",
    data: ({i : <?=$itemid;?>}),
    success: function(data){
        var s = data;
        var t = s.split(/[- :]/);
        var d = new Date(t[0], t[1]-1, t[2], t[3], t[4], t[5]);
        $('#defaultCountdown').countdown({until: d,compact: true, 
        description: ''});
    }
});
}, 1000);
</script>

这是gettime.php

<?php 
include("inc/dblink.inc");
$itemid = intval($_POST['i']);
$row = mysql_fetch_array(mysql_query("SELECT * FROM test WHERE itemid='$itemid' ORDER BY bidid DESC LIMIT 0,1"));
$date = $row['date'];
echo $date;
?>

我还使用了http://keith-wood.name/js/jquery.countdown.js中的 Keith Wood 的 jQuery 倒计时脚本

问题：

这条线$('#timeleft').load('gettime.php', { i: <?=$itemid;?> }).show();不错。添加 15 秒的新时间显示没有问题。这是我遇到问题的倒计时。它不会为计时器增加 15 秒，但如果我刷新整个页面，我可以看到增加了 15 秒。

我究竟做错了什么？jQuery 相当新。谢谢！

您可以在这里看到它的实际效果。

4

4 回答 4

3

这里有几个主要问题，还有一些小问题。

日期格式

使用 unix 时间戳而不是格式化日期要简单得多。PHP 和 javascript 在这方面非常相似。两者都基于相同的“纪元”，即 1970 年 1 月 1 日 00:00。UNIX/PHP 从该日期开始以秒为单位工作，而 javascript 以毫秒为单位工作。因此，无需复杂的字符串处理Date即可初始化javascript对象。new Date(unix_timestamp * 1000);

倒数

Countdown 旨在以 1 秒的分辨率自由运行到零（然后触发可选的回调函数）。如果轮询间隔为 1 秒，则无需每次都重新初始化倒数计时器 - 仅当返回的时间戳发生更改时。

效率

使用，在函数setinterval之外创建尽可能多的对象/字符串对客户端处理器更友好。setinterval这尤其适用于带有（静态）选择器的 jQuery 语句，因为这些选择器会导致（可能很大的）DOM 被搜索。

把所有这些放在一起，我的 javascript 看起来像这样：

$(function(){
    var $$ = {//cached jQuery objects
        timeleft: $('#timeleft'),
        defaultCountdown: $('#defaultCountdown')
    };
    var map_1 = {//namespace for setInterval and countdown data
        url: 'gettime.php',
        lastTimeStamp: 0,
        countdown_settings: {until:null, compact:true, description:''},
        itemid: <?=$itemid;?>
    };
    var auto_refresh = setInterval(function() {
        $$.timeleft.load(map_1.url, {i:map_1.itemid}).show();
        $.ajax({
            type: "POST",
            url: map_1.url,
            data: {i:map_1.itemid},
            success: function(unixTimeStamp) {
                unixTimeStamp = parseInt(unixTimeStamp);
                if(unixTimeStamp !== map_1.lastTimeStamp) {
                    map_1.countdown_settings.until = new Date(parseInt(unixTimeStamp) * 1000);
                    $$.defaultCountdown.countdown(map_1.countdown_settings);
                    map_1.lastTimeStamp = unixTimeStamp;
                }
            }
        });
    }, 1000);
});

当然，要完成这项工作，echo $date;需要修改 PHP 语句以回显日期的 unix 时间戳表示。对于存储在数据库中的日期格式的知识，这应该是相当微不足道的。

编辑：Unix 纪元是 1970 年 1 月 1 日 00:00（午夜），而不是 12:00（中午），呵呵！Javascript 是相同的，因此对代码没有负面影响。

于 2012-04-17T23:31:09.607 回答
2

您的日期对象（即“d”）仅初始化一次，即页面第一次加载时。每次运行倒计时功能时，找到一种重新初始化它的方法。

于 2012-04-13T10:14:17.770 回答
1

我认为您在这一行中的 php 脚本变量只生成一次，这就是为什么它只工作一次（即每次页面刷新）。

 $('#timeleft').load('gettime.php', { i: <?=$itemid;?> }).show();

更新您的 JS 成功代码以更新变量，因此每次调用都会更新页面。

于 2012-04-13T10:16:05.480 回答
1

在ajax中添加：

$('#defaultCountdown').countdown('option', {
    format: 'DHMS', until : d
});

为我工作。

于 2012-09-19T18:29:12.153 回答