Question

我需要帮助。我正在为我的游戏网站制作一个倒计时脚本，它从数据库中获取结束时间并倒计时，直到当前时间等于数据库时间。但是当它达到0时我似乎无法阻止它。我查看了setTimeout（），但我不明白我是如何让它工作的。

此外，当页面刷新时，它会从数据库时间再次启动计时器。我怎么样，将数据库更新到剩余时间或停止刷新计时器。

谢谢你。下面是我到目前为止的脚本

<?php
include "header.php";

?>
 <html>
<head>
<script type="text/javascript">
var curTime = Math.floor( (new Date()).getTime() / 1000 ); // replaced with PHP time(), presumably
var endTime = Math.floor( (new Date()).getTime() / 1000 ) + <?php echo $user_class->jail;?>;

function tick( )
{
    var secs = endTime - cTime;
    var mins = Math.floor( secs / 60 );
    secs %= 60;
    document.getElementById("ticker").innerHTML = 
         mins + " minutes, " + secs + " seconds";
    ++curTime;
}
</script>
</head>
<body onload="setInterval(tick,1000); tick();">
<h3>Time remaining is <span id="ticker"></span></h3>

</body>
</html>

我的数据库目前每1分钟通过一次cron更新，因此它可能因cron而失效。但我想知道是否有办法通过倒计时来更新数据库，所以它将像其他计时器一样精确

Answer 1

将此if（）放在tick（）函数的末尾

if(endTime < curTime) clearInterval(i);

并将您的onload值更改为此。

<body onload="i = setInterval(tick,100); tick();">

clearInterval应该完成这项工作。小心这一行

var secs = endTime - cTime;

你的cTime var

可能包含一个拼写错误

var secs = endTime - curTime;

Answer 2

您需要使用clearInterval（）函数。

可以找到很好的例子

http://www.w3schools.com/jsref/met_win_clearinterval.asp

Answer 3

当你调用setInterval函数时，它会返回一个创建计时器的处理程序（它只是一个数字）。并且您可以使用此处理程序通过将计时器传递给clearInterval函数

来停止计时器

示例：

timer = setTimeout(function () { console.log('hello'); }, 5000);
...
// This will stop timer
clearInterval(timer);

Answer 4

我重构了你的代码，不应该混淆html / js / css / php太多了。

文件： xxx.php：

<?php include "header.php"; ?>
<html>
<head>
</head>

<body>
<h3>Time remaining is <span id="ticker"></span></h3>
<input id="end_time" type="hidden" value="<?php echo $user_class->jail; ?>" />

<script src="scripts.js"></script>
</body>
</html>

文件： scripts.js ：

window.onload = function() {
    var timer;
    var curTime = Math.floor( (new Date()).getTime() / 1000 ); // replaced with PHP time(), presumably
    var endTime = Math.floor( (new Date()).getTime() / 1000 ) + document.getElementById('end_time').value;

    function tick() {
        var secs = endTime - curTime;
        var mins = Math.floor( secs / 60 );
        secs %= 60;
        document.getElementById("ticker").innerHTML = 
             mins + " minutes, " + secs + " seconds";
        ++curTime;
        if (curTime > endTime) {
            stopTimer();
        }
    }
    function startTimer() {
        timer = setInterval(tick,1000);
    }    
    function stopTimer() {
        clearInterval(timer);
    }
    startTimer();
};

达到0时停止Jquery计时器

4 个答案: