I am working on rails and written javascript code for displaying timer that starts from 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. 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?
I am working on rails and written javascript code for displaying timer that starts from 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. 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?
Share Improve this question asked Jul 24, 2013 at 13:10 przbaduprzbadu 6,0597 gold badges46 silver badges69 bronze badges 1- You could use HTML 5 Storage to store the start time when the timer begins. Then on page load look for that value and recalculate how much time has ticked – musefan Commented Jul 24, 2013 at 13:16
4 Answers
Reset to default 2get 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...
the next page needs just the start value and there are many ways to pass it..
php,js,get,post....and manymany more.
setTimeout() is also not precise for timers.
here is an example passing the value with 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.
Because you are redirecting, a java-script timer won't do. 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.
You can set the initial values for the variables sec, min, hour using session or cookies. 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.
Try to send default sec, min and hrs values from server, e.g. save them in coockie.