我正在设计一个网站,并使用 JavaScript 集成了一个 5 分钟倒计时器,该计时器在网页加载时启动。然而,由于我更像是一名设计师而不是开发人员,所以我不知道如何编辑 JavaScript 代码以使计时器在网页重新加载时不会重新启动。我知道我必须存储用户的cookie,并且我已经在网上搜索过,但是当我插入代码时,javascript代码不起作用。这里有人能帮助我吗?谢谢!
这里是 5 分钟计时器的 JavaScript 代码:
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + " " + " " + seconds;
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
window.onload = function () {
var fiveMinutes = 60 * 5,
display = document.querySelector('#time');
startTimer(fiveMinutes, display);
};
最佳答案
检查此方法,其中时间存储在浏览器的本地存储中,因此刷新时不会重置:
:HTML代码:
<div id="time">
</div>
:JS代码:
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + " " + " " + seconds;
if (--timer < 0) {
timer = duration;
}
console.log(parseInt(seconds))
window.localStorage.setItem("seconds",seconds)
window.localStorage.setItem("minutes",minutes)
}, 1000);
}
window.onload = function () {
sec = parseInt(window.localStorage.getItem("seconds"))
min = parseInt(window.localStorage.getItem("minutes"))
if(parseInt(min*sec)){
var fiveMinutes = (parseInt(min*60)+sec);
}else{
var fiveMinutes = 60 * 5;
}
// var fiveMinutes = 60 * 5;
display = document.querySelector('#time');
startTimer(fiveMinutes, display);
};
这是 codepen https://codepen.io/anon/pen/GymRNV?editors=1011 中相同的工作模型
P.S:无法在这里使用它,因为它是一个沙箱,无法访问本地存储。
关于javascript - 如何防止网页刷新时倒计时器重置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48020507/