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

【问题标题】：Best way to implement a timer in Javascript and php在 Javascript 和 php 中实现计时器的最佳方法
【发布时间】：2012-06-27 20:37:16
【问题描述】：

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

我知道 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();
    }
}

请给我建议最好的方法。

谢谢。

【问题讨论】：

如果他们禁用 JavaScript 会怎样？
是的，这也是一种可能！
但别担心，如果用户禁用了 javascript，我会显示错误消息。

标签： php javascript html time timer

【解决方案1】：

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

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

【讨论】：

感谢这真的是一个有经验的人的回答。我正在开发类似的东西，希望它对我有用。

【解决方案2】：

我建议您使用 cookie 来确定当前用户是否在某个已开始的测验中。 IE。当用户单击提交时，您正在使用 PHP 设置 cookie 并在数据库中记录开始时间。每次用户访问该页面时，您都会检查该 cookie 并从数据库中获取记录。这样您就可以知道距离测验结束还剩多少时间。

【讨论】：

我的意思是 cookie 可用于在数据库中存储用户记录的一些 id 哈希值。因此，稍后您将能够匹配用户。

【解决方案3】：

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

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

【讨论】：