刷新页面时重置计时器javascript
我正在尝试制作一个测验计时器。但是，当页面刷新时，计时器被重置，如何解决这个问题？
<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>
繁星coding2回答
-
UYOU
请注意，每次重新加载页面时，都会从上到下编译/执行整个代码。一旦到达初始化部分：var total_seconds = 60 * 2var 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");当您关闭浏览器选项卡或关闭浏览器时，此数据会被重置。 -
拉丁的传说
如果不需要服务器端计时器，您可以使用 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 remaningvar 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>
随时随地看视频慕课网APP
PHP