[英]Timer built in javascript resets when page is refresh
I am having a problem on storing my timer in a localStorage. 我在将计时器存储在localStorage中时遇到问题。 Everytime I refresh the browser, the timer resets.
每次刷新浏览器时,计时器都会重置。 Now what I want to do is to store my timer in a localStorage so everytime the user refreshes the browser the timer wont reset.
现在,我要做的就是将计时器存储在localStorage中,以便每次用户刷新浏览器时计时器都不会重置。 Please check my code below
请在下面检查我的代码
HTML HTML
<p class="w3-xlarge w3-serif"> <i>Linguistics Exam</i><span class="w3-right" id="timeLeft" name="timeLeft"></span></p>
JS JS
var total_seconds = 40*60;
var c_minutes = parseInt(total_seconds/60);
var c_seconds = parseInt(total_seconds%60);
function checkTime(){
document.getElementById("timeLeft").innerHTML = 'Time Left: ' + c_minutes + ' : ' + c_seconds;
if(total_seconds <= 0 ){
$(document).ready(function(){$("#submitLinguistics").click();});
}else{
total_seconds = total_seconds - 1;
c_minutes = parseInt(total_seconds/60);
c_seconds = parseInt(total_seconds%60);
setTimeout("checkTime()", 1000);
}
}
setTimeout("checkTime()", 1000);
First, change setTimeout
to setInterval
, which will be executed upon each second instead of manually calling setTimeout
on each instance: 首先,将
setTimeout
更改为setInterval
,它将每秒钟执行一次,而不是在每个实例上手动调用setTimeout
:
var total_seconds = 40*60;
var c_minutes = parseInt(total_seconds/60);
var c_seconds = parseInt(total_seconds%60);
function checkTime(){
document.getElementById("timeLeft").innerHTML = 'Time Left: ' + c_minutes + ' : ' + c_seconds;
if(total_seconds <= 0 ){
$(document).ready(function(){$("#submitLinguistics").click();});
clearInterval(myInterval);
}else{
total_seconds = total_seconds - 1;
c_minutes = parseInt(total_seconds/60);
c_seconds = parseInt(total_seconds%60);
}
}
var myInterval = setInterval(checkTime, 1000);
Next, you need to write total_seconds
into the localStorage
: 接下来,您需要将
total_seconds
写入localStorage
:
var total_seconds = localStorage.getItem("total_seconds") ? localStorage.getItem("total_seconds") : 40*60;
var c_minutes = parseInt(total_seconds/60);
var c_seconds = parseInt(total_seconds%60);
function checkTime(){
document.getElementById("timeLeft").innerHTML = 'Time Left: ' + c_minutes + ' : ' + c_seconds;
if(total_seconds <= 0 ){
$(document).ready(function(){$("#submitLinguistics").click();});
clearInterval(myInterval);
}else{
total_seconds = total_seconds - 1;
c_minutes = parseInt(total_seconds/60);
c_seconds = parseInt(total_seconds%60);
}
localStorage.setItem("total_seconds", total_seconds);
}
var myInterval = setInterval(checkTime, 1000);
Finally, if you close the tab and reopen it after a while, the counter will reload from where it was and the user could cheat by closing the tab, working on the answer and opening it again. 最后,如果您关闭标签并在一段时间后重新打开它,则计数器将从原位重新加载,并且用户可以通过关闭标签,处理答案并再次打开来作弊。 To cope with this situation, it is recommendable to cooperate with the server, that is, working with an actual date and loading based on that instead of using
localStorage
. 为了应对这种情况,建议与服务器合作,即使用实际日期并根据该日期进行加载,而不是使用
localStorage
。 A programmer user might even reset the timer from the console in the dev tools. 程序员用户甚至可以从开发工具的控制台中重置计时器。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.