每當頁面刷新時，Java Script Count Down Timer都會重置

Question

我有PHP頁面，在其中添加了30分鍾的倒計時。 當我刷新頁面或執行“插入”查詢並重定向回該頁面時，它會打勾，計時器將重置。

我希望計時器保持不變，並在刷新頁面時繼續計數而不會造成任何中斷。

我的代碼如下：

 function startTimer(duration, display) { var timer = duration, minutes, seconds; 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.textContent = minutes + ":" + seconds; if (--timer < 0) { timer = duration; } }, 1000); } window.onload = function() { var fiveMinutes = 60 * 30, display = document.querySelector('#time'); startTimer(fiveMinutes, display); }; 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="timer"> <div>Section</div> <div class="time"> <strong>Time left: <span id="time">30:00</span></strong> </div> </div> 

任何幫助表示贊賞。

Answer 1

使用html5本地存儲來更新計時器值，並在發生頁面加載時從本地存儲中讀取計時器值。 我想沒有其他辦法了。

Answer 2

每當您的PHP頁面加載時，JavaScript就會隨之加載。 所以

window.onload = function () {
    var fiveMinutes = 60 * 30,
    display = document.querySelector('#time');
    startTimer(fiveMinutes, display);
};

會被調用，計時器從5分鍾開始。

一種解決方案是在window.onload執行Ajax請求並獲取剩余時間。

另一個解決方案是，如果JavaScript代碼位於您的PHP文件中，則通過PHP設置fiveMinutes變量（顯然應更適當地重命名），例如

<script>
...
var timeLeft = <?php echo $timeLeft ?>;
...
</script>

第一個解決方案是標准的解決方案，第二個解決方案是簡單的解決方案。

Answer 3

正如其他人指出的那樣，您可以使用本地存儲（如果您的目標客戶端支持此功能， 請參見此處 ）

<script>
        function startTimer(duration, display) {
            var timer = duration, minutes, seconds;

          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.textContent = minutes + ":" + seconds;
                timer = --timer;
                if (timer >= 0) {
                    localStorage.setItem('time', timer);
                    //timer = duration;
                }
            }, 1000);
        }

        window.onload = function () {
            var countDown = 60 * 30;
            var oldVal = localStorage.getItem('time');
            if (oldVal && oldVal > 0) {
                countDown = oldVal;
            }
            var display = document.querySelector('#time');
            startTimer(countDown, display);
        };
</script>

編輯：當然，一定不要忘記檢查存儲值是否小於零。

Answer 4

如前所述，您可以使用localStorage存儲當前時間。 為此，您可以在每個間隔滴答中節省minutes和seconds ：

function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10)
        seconds = parseInt(timer % 60, 10);

        localStorage.setItem("minutes", minutes); // <--
        localStorage.setItem("seconds", seconds); // <--

在加載函數中，您將從它們中讀取並適當設置起始值。 重要的是要注意，值始終存儲為字符串，因此，有必要在將它們傳遞給它們之前將它們解析回數字：

window.onload = function () {
    var timeLeft = 60 * 30,
        display = document.querySelector('#time');

    var minutes = localStorage.getItem("minutes"); //read minutes
    var seconds = localStorage.getItem("seconds"); //read seconds

    if (minutes && seconds){
        timeLeft = Number(minutes) * 60 + Number(seconds); //set time with val from storage
    }

    startTimer(timeLeft, display);
};

我將您的fiveMinutes的名稱更改為timeLeft以更好地反映其內容，並使用Number()將這兩個值解析為數字。

同樣重要的是要提一下，雖然刷新后確實會保留值，但它不會“計算”頁面關閉的時間。 所以記住這一點。

Answer 5

與其刷新整個頁面，不如嘗試使用Ajax進行通信並使用javascript修改您的html頁面。