我是新来的HTML和JavaScript。我找不到任何解决方案来防止页面上的计时器在页面关闭或刷新时自动重启。即使页面/浏览器关闭或刷新,多个定时器继续(在后台运行)
我希望计时器能够继续运行,即使我关闭了页面/浏览器。例如:如果定时器倒计时1小时,我激活并关闭它。 30分钟后,我重新打开页面,剩余时间应该是30分钟。
这里我的计时器代码:
function countdown(element, hours, minutes, seconds, oritime) {
var interval;
var htemp = 0;
var mtemp = 0;
interval = setInterval(function() {
var el = document.getElementById(element);
if (seconds == 0) {
if (minutes == 0) {
if (hours == 0) {
clearInterval(interval);
el.innerHTML = oritime;
return;
} else {
if (htemp == 0) {
minutes = 0;
seconds = 0;
htemp = 1;
}
}
} else {
if (mtemp == 0) {
seconds = 0;
mtemp = 1;
}
}
}
if (hours > 0) {
var hour_text = hours > 9 ? '' : '0';
} else {
var hour_text = '0';
}
if (minutes > 0) {
var minute_text = minutes > 9 ? '' : '0';
} else {
var minute_text = '0';
}
var second_text = seconds > 9 ? '' : '0';
el.innerHTML = hour_text + hours + ' : ' + minute_text + minutes + ' : ' + second_text + seconds;
if (seconds == 0) {
if (minutes == 0) {
if (hours == 0) {
clearInterval(interval);
el.innerHTML = oritime;
return;
} else {
if (htemp == 1) {
hours--;
minutes = 59;
seconds = 60;
htemp = 0;
}
}
} else {
if (mtemp == 1) {
minutes--;
seconds = 60;
mtemp = 0;
}
}
}
seconds--;
}, 1000);
}
<input type="button" onclick="countdown('timer1',0,5,0,'5');" value="Start Timer 1">
<div id='timer1' color='red'>5</div>
<input type="button" onclick="countdown('timer2',0,5,0,'5');" value="Start Timer 2">
<div id='timer2' color='red'>5</div>
使用cookie将有可能解决这个问题?如果是这样,怎么样?
我没有使用PHP或AJAX或jQuery,因为我还没有知道。我没有服务器来发布HTML文件,所以我刚刚找到了一个使用谷歌驱动器发布的解决方案。
小题目,如果有人有上传HTML的任何“免费”服务器以便其他人可以通过在线访问,那就太好了。
免费在沙箱中?你可以使用jsfiddle或codepen。 –
“用于防止页面上的计时器” - 您是什么意思? – alan0xd7
我可以看到你尝试了clearInterval,但是如果它不适合你,那是因为变量有不同的作用域,即使它们都被称为“interval”。使用document.interval代替间隔并删除它前面的“var”。document.interval不是“一件事”,但可以将任何变量附加到DOM对象。试试如果这能解决问题。 – Schien