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

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())
}

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

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

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 个解决方案

解决方案1
1 已采纳 2018-07-05 18:33:09

解决方案2
0 2018-07-05 18:45:34

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

问题描述

2 个解决方案

解决方案1 1 已采纳 2018-07-05 18:33:09

解决方案2 0 2018-07-05 18:45:34

解决方案1
1 已采纳 2018-07-05 18:33:09

解决方案2
0 2018-07-05 18:45:34