刷新頁面時重置計時器javascript

Question

我正在嘗試制作一個測驗計時器。 但是，當頁面刷新時定時器被重置，如何解決這個問題？

 <html><h1>Js Timer</h1> <div style="font-weight: bold;" id="quiz-time-left"></div> <script type="text/javascript"> var total_seconds = 60*2 var c_minutes = parseInt(total_seconds/60); var c_seconds = parseInt(total_seconds%60); function CheckTime() { document.getElementById("quiz-time-left").innerHTML ='Time Left: ' + c_minutes + ' minutes ' + c_seconds + ' seconds' ; if (total_seconds <=0) { setTimeout('document.quiz.submit()',1); }else{ total_seconds = total_seconds -1; c_minutes = parseInt(total_seconds/60); c_seconds = parseInt(total_seconds%60); setTimeout("CheckTime()",1000); } } setTimeout("CheckTime()",1000); </script> <form method="post" name="quiz" action="http://10.11.3.102/sisfo/pegawai/timer"></form>

Answer 1

如果不需要服務端定時器，可以使用localstorage存儲定時器的剩余時間，在頁面刷新時使用。

<html><h1>Js Timer</h1>
<div style="font-weight: bold;" id="quiz-time-left"></div>
<script type="text/javascript">

//Checking localstorage to check if timer is remaning
var total_seconds =window.localStorage.getItem('total_seconds');

    total_seconds = (total_seconds!=null && total_seconds>0)?total_seconds:60*2;
    var c_minutes = parseInt(total_seconds/60);
    var c_seconds = parseInt(total_seconds%60);
    function CheckTime() {
        document.getElementById("quiz-time-left").innerHTML
        ='Time Left: ' + c_minutes + ' minutes ' + c_seconds + ' seconds' ;
        if (total_seconds <=0) {
            setTimeout('document.quiz.submit()',1);

    //Clearing localstorage when reseting timer
    window.localStorage.clear('total_seconds');
        }else{
            total_seconds = total_seconds -1;
            c_minutes = parseInt(total_seconds/60);
            c_seconds = parseInt(total_seconds%60);

            setTimeout("CheckTime()",1000);
        }

    //Updating timer data in localstorage
    window.localStorage.setItem('total_seconds', total_seconds);
    }
    setTimeout("CheckTime()",1000);
</script>
<form method="post" name="quiz" action="http://10.11.3.102/sisfo/pegawai/timer"></form>

Answer 2

請注意，每次重新加載頁面時，都會從上到下編譯/執行整個代碼。 一旦到達初始化部分：

var total_seconds = 60*2

var c_minutes = parseInt(total_seconds/60);

var c_seconds = parseInt(total_seconds%60);

total_seconds 重置為 60*2

如果您不想重置時間，則必須使用不隨頁面重新加載的存儲內存。 那將是會議。

您可以使用 localStorage 但我不推薦它，因為即使瀏覽器關閉它也會保留變量。

sessionStorage 信息可以在 w3schools 上找到。

// 店鋪

sessionStorage.setItem("lastname", "Smith");

// 取回

document.getElementById("result").innerHTML = sessionStorage.getItem("lastname");

當您關閉瀏覽器選項卡或關閉瀏覽器時，這些數據將被重置。

刷新頁面時重置計時器javascript

問題描述

2 個解決方案

解決方案1
0 2019-12-31 08:52:49

解決方案2
0 2019-12-31 09:02:01

刷新頁面時重置計時器javascript

問題描述

2 個解決方案

解決方案1 0 2019-12-31 08:52:49

解決方案2 0 2019-12-31 09:02:01

解決方案1
0 2019-12-31 08:52:49

解決方案2
0 2019-12-31 09:02:01