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

时间:2012-06-27 20:37:17

标签: php javascript html time timer

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

我知道setInterval和基本的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();
    }
}

请告诉我最好的方法。

谢谢。

3 个答案:

答案 0 :(得分:4)

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

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

答案 1 :(得分:1)

我建议您使用Cookie来确定当前用户是否在某些已开始的测验中。即当用户单击“提交”时,您将使用PHP设置cookie并在数据库中记录开始时间。每当用户访问该页面时,您将检查该cookie并从数据库中获取记录。这就是你将如何知道在测验结束前剩下多少时间。

答案 2 :(得分:0)

Cookie是记住开始时间的关键。在cookie中设置开始时间,在php中提交。同一时间应该在脚本元素中写入页面(然后服务器和客户端都将知道开始时间)。要保护cookie,您可以在服务器端对其进行加密。您可以通过将cookie中的值与js中的值(测试完成时)进行比较来验证开始时间是否未被篡改。

如果页面重新加载且cookie存在,请从cookie中抽出时间而不是设置新时间。