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}

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

3 个答案: