如何在刷新页面时停止重置JavaScript计时器

Question

我正在做一个在线考试页面。 在此页面中，我有一个倒数计时器，该倒数计时器通过数据库中的值进行倒计时。 它工作正常，但是当我刷新页面时它会重置。 我必须停止计时器重置。

这是我的JavaScript计时器代码：

<script type="text/javascript">
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>" +"Time Remaining: "+ minutes + "m : " + seconds + "s" + "</b>");
            if (--timer < 0) {
                timer = duration;
                SubmitFunction();
                $('#display').empty();
                clearInterval(interVal)
            }
        },1000);
    }
}

function SubmitFunction(){
    $('#result').click();
}

CountDown(<?php echo $t*30; ?>,$('#display')); //$t comes from database

function disable_f5(e) {
    if ((e.which || e.keyCode) == 116) {
        e.preventDefault();
    }
}

$(document).ready(function(){
    $(document).bind("keydown", disable_f5);
});
</script>

Answer 1

我刚刚看到了您的问题，并且打算解决这个问题。 我建议的一件事是尝试将值提交到本地存储。 您可以添加一个事件侦听器，让它指定侦听重载，然后在重载时将整数值以JSON格式提交给本地存储。 只是一个主意。

Answer 2

如果您已经在使用数据库，那么向现有表中添加一个表或一个额外字段以注册用户开始检查的日期时间，然后在每次加载页面时-您可以从数据库中获取开始时间，请执行一些操作时髦的计算，然后显示剩余时间。

这样，您就不必依赖浏览器中的跟踪记录了（尽管我可能已经建议过尝试使用会话存储），但是可以放心地计算出一个恒定的开始时间。

Answer 3

尝试将其作为一种方法-仅注意列出的代码框架以演示该方法。 我会亲自在数据库中设置日期时间。

//at commencement of exam
//js var commencementTime = (//calculation to get current time);

localStorage.setItem('commencementTime ',commencementTime );

//on page reload
var commencementTime= localStorage.getItem('commencementTime ');
    if(commencementTime){ 
    //code for calculating countdown}