在花了45分钟寻找解决方案后,我似乎找不到一个简单的解决方案来使用PHP和jQuery创建倒计时计时器。我发现大多数已经构建的脚本都是纯粹基于jQuery的,这需要大量的代码,并且需要更多的参数,而且适应性非常困难。
这是我的情况;
PHP:
$countdown = date("h:i:s"); // This isn't my actual $countdown variable, just a placeholder
jQuery:
$(document).ready(function name() {
$("#this").load( function() {
setTimeout("name()", 1000)
}
}
});HTML:
<div id="this"><?php echo($countdown); ?></div>
我的想法是,每秒都会重新加载#this,为其内容赋予一个新值,而且由于$countdown不是静态变量,所以每次都会加载一个新值。这消除了处理会话的需要(因为基本的javascript倒计时器会在页面加载时重置,等等)。
我本以为这会起作用,直到我意识到事件绑定器.load()不会重新加载#this (我知道我很傻),所以我猜我想知道的是-有没有事件绑定器可以让这件事起作用,或者有没有办法在不使用jQuery插件的情况下获得我想要的功能(它无论如何都不完全符合我想要的)?
发布于 2011-08-19 08:53:30
您与您的原始代码非常接近。下面是你的代码的一个修改,按照描述的那样工作,或者至少我认为--我知道它可以工作,但不确定它是否符合你的要求,他们有点不清楚。显然,如果您重新加载页面,您将不得不依赖于PHP输出的不同,以便计数器不会重置。需要注意的是,我不完全确定为什么要使用.load函数-该函数实际上只是一个AJAX调用的包装器,用于获取另一个页面的内容并将其插入到选定的div中。我相信您正在寻找的是.html()函数,它使用DOM中的可用内容更改所选div的内容,而不是发出AJAX请求。
var timer;
$(document).ready(
name();
);
function name() {
//clear the timer
clearTimeout(timer);
//reset the timer
timer = setTimeout("name()", 1000);
//grab the current time value in the div
var time = $("#this").html();
//split times
var time_splits = time.split(":");
//add up total seconds
var total_time = (parseInt(time_splits[0])*60*60) + (parseInt(time_splits[1])*60) + parseInt(time_splits[2]);
//subtract 1 second from time
total_time -= 1;
//turn total time back in hours, minutes, and seconds
var hours = parseInt(total_time / 3600);
total_time %= 3600;
var minutes = parseInt(total_time / 60);
var seconds = total_time % 60;
//set new time variable
var new_time = (hours < 10 ? "0" : "") + hours + (minutes < 10 ? ":0" : ":" ) + minutes + (seconds < 10 ? ":0" : ":" ) + seconds;
//set html to new time
$("#this").html(new_time);
}https://stackoverflow.com/questions/7115620
复制相似问题