在javascript中使用PHP时间字符串后,倒计时不起作用


Countdown does not work after using the PHP time string into javascript

我正在创建时间,稍后将用于制作倒计时计时器。当我只选择JavaScriptjQuery时,它很容易创建。但是,当我获得PHP日期时间字符串并使用jQuery显示它时,问题就来了。在使用PHP日期和时间字符串后,它不会动态更新时间。下面是我的一个小代码。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        var value = $("#date_time").text();
        function countdown(){
              setTimeout(countdown, 1000);
              var date = new Date(Date.parse(value));
              $("#php_date_time").text(date);
           }
        countdown();

    });

    </script>
</head>
<body >
    <div id="date_time"><?php echo Date("d-m-Y H:i:s");?></div>
    <div id="php_date_time"> </div>
</body>
</html>

如果我不将PHP日期-时间字符串作为参数传递给javascript Date()函数,那么代码运行得非常好。如果开始工作,我可以自己倒计时。

var date = new Date(); // works fine without passing php date time string
var date = new Date(Date.parse(value)); // this does not work fine. Time does not update

请帮助建议我需要做什么。

谢谢。

由于您希望它从PHP给您的时间开始,您需要更改javascript以使用该时间设置初始值,然后每秒更改一次。现在您只是使用相同的值进行更新。

http://codepad.viper-7.com/sPVlEI

$(document).ready(function(){
    var value = $("#date_time").text();   //get init value
    var date = new Date(Date.parse(value)); //store initial time
    setInterval(function countdown(){
        $("#php_date_time").text(date);    //set time
        date = new Date(date.getTime() + 1000);  //create new time from old + 1 sec
    },1000); // will call countdown() function every second
});

问题是,由于服务器只编译了一次php日期,countdown函数总是使用相同的日期值。您必须考虑的另一个问题是,您的服务器时间与客户端时间不必匹配。你最好用客户端时间开始计时。但是如果你想根据你的服务器时间启动它,试试这个,你的问题就解决了:

$(document).ready(function(){
    var value = $("#date_time").text();
    function countdown(date){
        setTimeout(function(){
            countdown(new Date(date.valueOf()+1000));
        }, 1000);
        $("#php_date_time").text(date);
    }
    countdown(new Date(Date.parse(value)));
});