在Javascript和PHP中實現計時器的最佳方法

Question

我正在用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();
    }
}

請建議我最好的方法。

謝謝。

Answer 1

實現此目的的最佳方法之一如下：在測驗開始時，向服務器發送AJAX請求，告知您的PHP腳本已啟動。 您的PHP腳本應為持有開始時間的該用戶存儲一個會話變量。 提交測驗時，請檢查以確保當前時間與會話存儲的開始時間之間的時差不大於您允許的時間。

會話變量不能由客戶端編輯或查看。 如果客戶端在測驗的中間加載頁面，則根據會話中的開始時間將JS計時器數量設置為剩余的時間。

Answer 2

我建議您使用cookie來確定當前用戶是否正在參加一些測驗。 即，當用戶單擊“提交”時，您將使用PHP設置cookie並將開始時間記錄在數據庫中。 每次用戶訪問頁面時，您都會檢查該cookie，並從數據庫中獲取記錄。 這樣一來，您便可以知道到測驗結束還剩下多少時間。

Answer 3

Cookies是記住開始時間的關鍵。 在cookie中設置開始時間，在提交時使用php。 應該在腳本元素中將同一時間寫入頁面（然后服務器和客戶端都將知道開始時間）。 為了保護cookie，您可以在服務器端對其進行加密。 您可以通過將cookie中的值與js中的值（測試完成時）進行比較來驗證開始時間是否未被篡改。

如果頁面重新加載並且cookie存在，請從cookie中拉出時間而不是設置新時間。