如何让 setInterval countUp 计时器在 "Another Page" 或 "browser refresh" 中继续计数?
How Can I make setInterval countUp timer keep counting even in "Another Page" or "browser refresh"?
我尝试在我的 header 网页上创建一些“访客 CountUp 计时器”。但是,当我 select 另一个选项卡时,计时器会再次从 00:00:00 重新启动。有什么解决方案可以让它在“另一页”或“浏览器刷新”中继续计数吗?我不确定如何将 sessionStorage 添加到我当前的代码中。
有人愿意帮忙吗?
谢谢
var sec = 0;
function pad ( val ) { return val > 9 ? val : "0" + val; }
setInterval( function(){
document.getElementById("seconds").innerHTML=pad(++sec%60);
document.getElementById("minutes").innerHTML=pad(parseInt(sec/60%60,10));
document.getElementById("hours").innerHTML=pad(parseInt(sec/3600%60,10));
}, 1000);
<span id="hours">00</span>:<span id="minutes">00</span>:<span id="seconds">00</span>
您的解决方案是使用本地存储:
var sec = 0;
tmpSec = localStorage.getItem('secs')
if (tmpSec != null) {
sec = parseInt(tmpSec,10);
}
function pad ( val ) { return val > 9 ? val : "0" + val; }
setInterval( function(){
++sec
localStorage.setItem('secs', sec)
document.getElementById("seconds").innerHTML=pad(sec%60);
document.getElementById("minutes").innerHTML=pad(parseInt(sec/60%60,10));
document.getElementById("hours").innerHTML=pad(parseInt(sec/3600%60,10));
}, 1000);
这是保存在localStorage中的间隔示例https://github.com/syronz/micro-games/blob/master/02%20idle%20game/progress.html
var sec = 0;
每次 运行 时都会重置您的计时器。
而是这样编码:
sessionStorage.sec = "0"; // only execute this when you want to reset your counter.
setInterval( function(){
var sec = parseInt(sessionStorage.sec);
sec++;
sessionStorage.sec = sec.toString();
document.getElementById("seconds").innerHTML=pad(sec%60);
document.getElementById("minutes").innerHTML=pad(parseInt(sec/60%60,10));
document.getElementById("hours").innerHTML=pad(parseInt(sec/3600%60,10));
}, 1000);
您可以向 URL 添加一个查询,然后使用此查询重定向到另一个 URL:
window.location.href += "?end=someTime"
那么你可以设置定时器以此为结束:
var url = new URL(window.location.href);
var end = url.searchParams.get("end");
doSomething(end);
我尝试在我的 header 网页上创建一些“访客 CountUp 计时器”。但是,当我 select 另一个选项卡时,计时器会再次从 00:00:00 重新启动。有什么解决方案可以让它在“另一页”或“浏览器刷新”中继续计数吗?我不确定如何将 sessionStorage 添加到我当前的代码中。
有人愿意帮忙吗?
谢谢
var sec = 0;
function pad ( val ) { return val > 9 ? val : "0" + val; }
setInterval( function(){
document.getElementById("seconds").innerHTML=pad(++sec%60);
document.getElementById("minutes").innerHTML=pad(parseInt(sec/60%60,10));
document.getElementById("hours").innerHTML=pad(parseInt(sec/3600%60,10));
}, 1000);
<span id="hours">00</span>:<span id="minutes">00</span>:<span id="seconds">00</span>
您的解决方案是使用本地存储:
var sec = 0;
tmpSec = localStorage.getItem('secs')
if (tmpSec != null) {
sec = parseInt(tmpSec,10);
}
function pad ( val ) { return val > 9 ? val : "0" + val; }
setInterval( function(){
++sec
localStorage.setItem('secs', sec)
document.getElementById("seconds").innerHTML=pad(sec%60);
document.getElementById("minutes").innerHTML=pad(parseInt(sec/60%60,10));
document.getElementById("hours").innerHTML=pad(parseInt(sec/3600%60,10));
}, 1000);
这是保存在localStorage中的间隔示例https://github.com/syronz/micro-games/blob/master/02%20idle%20game/progress.html
var sec = 0;
每次 运行 时都会重置您的计时器。
而是这样编码:
sessionStorage.sec = "0"; // only execute this when you want to reset your counter.
setInterval( function(){
var sec = parseInt(sessionStorage.sec);
sec++;
sessionStorage.sec = sec.toString();
document.getElementById("seconds").innerHTML=pad(sec%60);
document.getElementById("minutes").innerHTML=pad(parseInt(sec/60%60,10));
document.getElementById("hours").innerHTML=pad(parseInt(sec/3600%60,10));
}, 1000);
您可以向 URL 添加一个查询,然后使用此查询重定向到另一个 URL:
window.location.href += "?end=someTime"
那么你可以设置定时器以此为结束:
var url = new URL(window.location.href);
var end = url.searchParams.get("end");
doSomething(end);