如何使计时器也可以在后台运行？
[英]How to make timer that can run on background also?
问题描述
I am working on rails and written javascript code for displaying timer that starts from 00:00:00. 
我正在使用Rails，并编写了JavaScript代码来显示从00:00:00开始的计时器。
[NOTE: i have two button start and stop for starting the timer and stopping the timer] [注意：我有两个按钮启动和停止，用于启动计时器和停止计时器]
function timer(){
var sec, min, hour;
sec=0;
min=0;
hrs=0;
sec++;
if(sec>=60){
min++;
sec=0;
}
if(min>=60){
hrs++;
min=0;
}
document.getElementById("hrs").innerHTML=hrs;
document.getElementById("min").innerHTML=min;
document.getElementById("sec").innerHTML=sec;
setTimeout(timer(), 1000);
}
Now this is working fine in my rails web application. 现在，这在我的Rails Web应用程序中可以正常工作。 But if I will redirect to another page and return to this page I am losing the timer value. 但是，如果我将重定向到另一个页面并返回该页面，则将丢失计时器值。
Here, I want the clock to be running continuously after page redirect also. 在这里，我希望时钟在页面重定向之后也能连续运行。
How to fix this? 如何解决这个问题？
4 个解决方案
解决方案1
1 2013-07-24 13:20:13
get the timestamp... save it somewhere and pass it as a variable to the next page 获取时间戳...将其保存在某处，并将其作为变量传递到下一页
var start=new Date().getTime();
to get the time passed 使时间过去
var currentMillisecondsPassed=new Date().getTime()-start;
convert this to hh:mm:ss.msec or whatever... 将此转换为hh:mm:ss.msec或其他任何内容...
the next page needs just the start value and there are many ways to pass it.. php,js,get,post....and manymany more. 接下来的页面需要仅仅是start值，有很多方法来通过它.. PHP，JS，GET，POST ....和manymany更多。
setTimeout() is also not precise for timers. setTimeout()对于计时器也不精确。
here is an example passing the value with querystring.. 这是一个通过querystring传递值的示例。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>timer</title>
<script>
window.onload=function(){
var pt=window.location.search.split('=')[1],
e=document.body.childNodes,
t=e[0],
s=(pt*1||0),
interval,
ms2Time=function(a) {
var ms=parseInt((a%1000)/100),
s=parseInt((a/1000)%60),
m=parseInt((a/(1000*60))%60),
h=parseInt((a/(1000*60*60))%24);
return (h<10?'0'+h:h)+':'+(m<10?'0'+m:m)+':'+(s<10?'0'+s:s)+'.'+ms;
},
Start=function(){
s=new Date().getTime();
interval=window.setInterval(getcurrent,100);
},
Stop=function(){
window.clearInterval(interval);
s=0;
},
getcurrent=function(){
t.textContent=ms2Time(new Date().getTime()-s);
},
changepage=function(){
window.location='?start='+s;
};
e[1].addEventListener('click',Start,false);
e[2].addEventListener('click',Stop,false);
e[3].addEventListener('click',changepage,false);
if(pt&&pt!=0){
interval=window.setInterval(getcurrent,100);
}
}
</script>
</head>
<body><div id="timer"></div><button>start</button><button>stop</button><button>anotherpage</button></body>
</html>
as i said... you can store the start value anywhere ...so if you have any preferences ... just tell me and i can change the code for u. 如我所说...您可以将起始值存储在任何地方...因此，如果您有任何偏好...请告诉我，我可以为您更改代码。
解决方案2
0 2013-07-24 13:17:14
Because you are redirecting, a java-script timer won't do. 因为您正在重定向，所以Java脚本计时器不会执行。 You should use system time instead. 您应该改用系统时间。 You can take some help from session variables while redirecting from the page, to save the time stamp when the timer started. 从页面重定向时，您可以从会话变量中获取一些帮助，以保存计时器启动时的时间戳。
解决方案3
0 2013-07-24 13:19:18
You can set the initial values for the variables sec, min, hour using session or cookies. 您可以使用会话或cookie为变量sec, min, hour设置初始值。 And include this file in all the pages which you want the timer should run in background. 并将此文件包含在希望计时器在后台运行的所有页面中。
function timer(){
sec++;
if(sec>=60){
min++;
sec=0;
}
if(min>=60){
hrs++;
min=0;
}
setTimeout(timer(), 1000);
}
And add the values to the DOM only in the page which you are showing the timer. 并仅在显示计时器的页面中将值添加到DOM。
解决方案4
-1 2013-07-24 13:18:24
尝试从服务器发送默认的sec ， min和hrs值，例如将其保存在coockie中。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.