timer is reset when the page is refreshed javascript
Question
I'm trying to make a quiz timer. but, when the page is refreshed the timer is reset, How to solve this?
<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 answers
solution1
0 2019-12-31 08:52:49
If server-side timer not required, you can use localstorage for storing time remaining in timer and use it when page is refreshed.
<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>
solution2
0 2019-12-31 09:02:01
Note that everytime a page is reloaded, the entire code is compiled/ executed from the top downwards. Once it reaches the initialization part :
var total_seconds = 60*2
var c_minutes = parseInt(total_seconds/60);
var c_seconds = parseInt(total_seconds%60);
The total_seconds is reset to 60*2
If you don't want the time to be reset, you will have to use a storage memory that doesn't reload with the page. That will be sessions.
You could use localStorage but i wouldn't recommend it as it keeps the variable even when the browser is closed.
The sessionStorage information can be found on w3schools here .
// Store
sessionStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = sessionStorage.getItem("lastname");
This data is reset when you close a browser tab or close the browser.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.