我正在设计一个网站,我整合了一个5分钟倒数计时器,该计时器在使用JavaScript加载网页时启动。但是,由于我更像是设计师而不是开发人员,因此我不知道如何编辑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);
};
答案 0 :(得分:0)
对于这种情况,您应该使用Web“会话存储”API。它会帮助你。
https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
答案 1 :(得分:0)
检查此方法,其中时间存储在浏览器的本地存储中,因此刷新时不会重置:
:HTML CODE:
<div id="time">
</div>
:JS CODE:
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:不能在这里使用它,因为它是一个沙箱,无法访问本地存储。
答案 2 :(得分:0)
抱歉 var distance = localStorage.getItem("mytime") - 现在;var x =localStorage.getItem("mytime");我花了大约 6 周的时间来解决这个问题,它有效,你需要本地存储,但只在倒计时,现在仍然必须运行,所以计数器计数,倒计时是锚点,看看 w3school 有倒计时设置,这就是它起作用的原因,那就是你使用本地存储
答案 3 :(得分:-1)
使用 w3 学校倒数计时器,倒计时日期使用 localstorage.mytime=setDate(d.getDate + 7),如果距离 < 0,则结束;localStorageremoveItem,就是这样,运行代码