我正在创建时间,稍后将用于制作倒计时计时器。当我只选择JavaScript
或jQuery
时,它很容易创建。但是,当我获得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)));
});