我正在嘗試制作一個測驗計時器。但是，當頁面刷新時，計時器被重置，如何解決這個問題？<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>
2 回答
UYOU
TA貢獻1878條經驗 獲得超4個贊
請注意，每次重新加載頁面時，都會從上到下編譯/執行整個代碼。一旦到達初始化部分：
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("姓氏", "史密斯");
// 取回
document.getElementById("result").innerHTML = sessionStorage.getItem("lastname");
當您關閉瀏覽器選項卡或關閉瀏覽器時，此數據會被重置。
拉丁的傳說
TA貢獻1789條經驗 獲得超8個贊
如果不需要服務器端計時器，您可以使用 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>
- 2 回答
- 0 關注
- 179 瀏覽
添加回答
舉報
0/150
提交
取消