多个定时器继续(在后台运行),即使页面/浏览器被关闭或刷新
Multiple Timer continue(running on background) even the page/browser is closed or refresh
我是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,以便其他人可以通过在线访问,那将是伟大的。简短的回答不是。Javascript
只会在你的浏览器打开时运行,不应该用来保存任何数据。
如果你想要一个定时器,你应该使用服务器和服务器端语言,如PHP
来完成它。
编辑:话虽如此,我发现了一个Jquery
插件,可以使用你。
您应该尝试重构您的代码,例如:
if (seconds === 0 && minutes === 0 && hours === 0) {
// your else logic here...
}
你也可以选择使用switch
如果你碰巧使用很多"嵌套if"和短路逻辑。
是的,当你进入javascript的世界时,你会发现很多有趣的库和框架(基本上有很多抽象的函数/方法,很多聪明的人已经为你预先写好了),你可以用它们来帮助你更快地开发函数!
因为你只把你的元素存储到一个"变量"中,你的计时器只会运行只要本地会话是活的(即所有存储的变量将被清除一旦你关闭你的浏览器/会话)。
如果你想在数据库中更多地使用数据存储和实际的持久化数据,你应该至少在一个"本地主机"环境中开发,你可以通过在https://nodejs.org/上下载使用"Nodejs"轻松设置。
希望这对你的编码发展道路有所帮助!
相关文章:
- Jquery Draggable-在浏览器刷新时保持位置
- 我创建了一个Javascript待办事项列表,但想知道如何在浏览器刷新后保留这些帖子
- 在浏览器刷新时保存XHR渲染状态
- 如何进行允许浏览器刷新的匿名Firebase登录
- 如何单独检测浏览器刷新
- 在浏览器刷新上重复数据-Nodejs
- AngularJs:UI路由器浏览器刷新,移动到第一个子状态
- 从数组空值到浏览器刷新的 Javascript 变量
- 锚链接是指在浏览器刷新、后退和前进时不起作用的页面部分
- 如何在浏览器刷新时记住您的 iframe 指向哪个 HRREF
- AngularJS:cookie 在浏览器刷新时失败
- 当浏览器刷新本地存储刷新时
- 如何防止我的计时器在浏览器刷新时重置
- 浏览器刷新时的随机全屏背景图像
- jQuery在浏览器刷新时丢失XML数据
- 通过javascript/jquery限制浏览器刷新,f5,像银行网站一样返回浏览器
- 文档's总高度函数's的返回值在浏览器刷新时发生更改(F5)
- 如何在javascript或jquery中跟踪浏览器刷新/返回/选项卡关闭和浏览器关闭事件
- onblur事件不'如果用户在文本字段中输入值并直接按下浏览器刷新按钮,则无效
- 浏览器刷新时,JQuery多选复选框下拉列表未被取消选中