在Javascript和php中实现计时器的最佳方式

Question

我正在开发一个php和Javascript的测验应用程序。测验在用户点击提交按钮时开始(我不能控制测验何时开始)。测验应该在特定的时间后停止(我决定)。我不想完全依赖客户端计算机来停止时间，因为客户端pc时间可以更改。测验不应在页面刷新时重新启动。

我知道setInterval和basic javascript。到目前为止，我开发的功能运行得很好，但测验会在页面刷新时重新启动。

function formatSecondsAsTime(secs) {
    var hours = Math.floor(secs / 3600);
    var minutes = Math.floor(secs / 60) - (hours * 60);
    var seconds = secs - (hours * 3600) - (minutes * 60);
    return hours + ':' + minutes + ':' + seconds;
}

function startTimer(mytime) {
    mytime = mytime.split(":");
    hrs = mytime[0];
    parseInt(hrs, 10);
    mins = mytime[1];
    parseInt(mins, 10)
    secs = mytime[2];
    parseInt(secs, 10);
    if (hrs > 0 || mins > 0 || secs > 0) {
        timerVar = setInterval(function () {
            if (secs > 0) //time is less than a minute
            {
                displayTime(hrs, mins, secs--);
            }
            else if (secs == 0 && mins > 0) {

                displayTime(hrs, mins = mins - 1, secs = secs + 59);
            }
            else if (secs == 0 && mins == 0 && hrs > 0) {
                displayTime(hrs--, mins = mins + 59, secs = secs + 59);
            }
            else if (secs == 0 && mins == 0 && hrs == 0) {
                clearTimeout(timerVar);
                displayTime(0, 0, 0);
            }
        }, 1000);
    }
    else {
        displayTime(0, 0, 0);
    }
}


function displayTime(hrs, mins, secs) {
    if (secs > 0 || hrs > 0 || mins > 0) {
        if ((secs.toString()).length < 2) secs = "0" + secs;
        if ((mins.toString()).length < 2) mins = "0" + mins;
        if ((hrs.toString()).length < 2) hrs = "0" + hrs;

        document.getElementById("quiztime").innerHTML = "Time remaining: " + hrs + ":" + mins + ":" + secs;
    }
    else {
        document.getElementById("quiztime").innerHTML = "Quiz has ended!";
        alert("Quiz has ended. Click ok to continue.");
        document.forms["answerForm"].submit();
    }
}

请给我推荐一下做这件事的最佳方法。

谢谢。

Answer 1

实现这一目标的最佳方法之一是:在测验开始时，向服务器发送一个AJAX请求，告诉您的PHP脚本已经启动。PHP脚本应该为持有开始时间的用户存储一个会话变量。提交测验时，请检查以确保当前时间与会话存储的开始时间之间的差异不大于您允许的时间量。

客户端无法编辑或查看会话变量。如果客户端在测验过程中加载页面，则根据会话中的开始时间将JS计时器数量设置为剩余时间。

Answer 2

我建议您使用cookie来确定当前用户是否在某个入门测验中。例如，当用户单击submit时，您正在使用PHP设置cookie，并在数据库中记录启动时间。每次用户访问页面时，您都会检查该cookie，并从数据库中获取记录。这样你就可以知道离测验结束还有多少时间。

Answer 3

Cookie是记住开始时间的关键。在cookie中设置开始时间，在提交时使用php。这个相同的时间应该在脚本元素中写入页面(这样服务器和客户端都会知道开始时间)。为了保护cookie，您可以在服务器端对其进行加密。您可以通过比较cookie中的值和js中的值(测试完成时)来验证开始时间是否被篡改。

如果页面重新加载并且cookie存在，则从cookie中提取时间，而不是设置新时间。