Question

我的PHP包含文件中包含此代码，用于在线测验。如何停止我的JavaScript计时器重新启动页面刷新？我是本地存储和Cookie的新手。请我帮忙提供示例代码或修改我的代码。

<div class="timer">Time Remaining <span id="display"></span> minutes!</div> 

<script>
    function CountDown(duration, display) {
        if (!isNaN(duration)) {
            var timer = duration, minutes, seconds;

            var interVal=  setInterval(function () {
                minutes = parseInt(timer / 60, 10);
                seconds = parseInt(timer % 60, 10);

                minutes = minutes < 10 ? "0" + minutes : minutes;
                seconds = seconds < 10 ? "0" + seconds : seconds;

                $(display).html("<b>" + minutes + "m : " + seconds + "s" + "</b>");

                if (--timer < 0) {
                   timer = duration;
                   SubmitFunction();
                   $('#display').empty();
                   clearInterval(interVal)
                }
            },1000);
        }
    }

    function SubmitFunction(){
        window.location.href = "quizResult.php";    
    }

    CountDown(60,$('#display'));    

</script>

Answer 1

就像@geekley所述，您可以存储计时器最初开始的时间。一种简单的方法是利用本地存储，您已经提到了它还不了解很多。

我可能会做的就是这样设置时间：

localStorage.setItem('StartTime', Date.now())

当用户访问或加载页面时，您可以对此值进行初步检查。因此，这行代码可能会更改为：

var startTime = localStorage.getItem('StartTime')

// if startTime exists, calculate your counter like so:
// timeRemaining = (initial countdown value) - (CurrentTime - StartTime)

var timeRemaining // declare this variable and set it to whatever value you'd like as a default

if (startTime) {
    timeRemaining = timeRemaining - (Date.now() - startTime)
} else {
    localStorage.setItem('StartTime', Date.now())
}

然后，通过传递timeRemaining变量作为参数来调用CountDown函数。您可能需要编辑逻辑以计算毫秒到分钟，但是您似乎对此很有把握。我希望这会有所帮助！

编辑
比较Date.now（）的实例将返回毫秒。您可以检查mozilla docs以获得有关处理此问题的更多信息。

Answer 2

您的代码未显示任何内容。无论如何，您可以使用下面的代码来设置测验的结束时间，无论您是否刷新页面，该设置都会为您提供确切的计时器。

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
  text-align: center;
  font-size: 60px;
  margin-top:0px;
}
</style>
</head>
<body>

<p id="demo"></p>

<script>

    var countDownDate = new Date("Jul 7, 2018 00:06:25").getTime();

    var x = setInterval(function(){

        var now = new Date().getTime();

        var distance = countDownDate - now;

        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));

        var seconds = Math.floor((distance % (1000 * 60)) / 1000);

        document.getElementById("demo").innerHTML = minutes + "m " + seconds + "s ";

        if (distance < 0) {
            clearInterval(x);
            document.getElementById("demo").innerHTML = "EXPIRED";
        }

    }, 1000);

</script>

</body>

</html>

如何防止我的JavaScript计时器重新启动页面重新加载

2 个答案: