CODEWITHSUNDEEP
javascripttimerruby-on-rails-3.2countdowntimer
przbadu
przbadu

Reputation: 6049

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.

[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?

Upvotes: 0

Views: 10220

Answers (4)

cocco
cocco

Reputation: 16716

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...

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.

Upvotes: 2

Abhilash M A
Abhilash M A

Reputation: 564

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.

Upvotes: 0

Enam
Enam

Reputation: 1268

Try to send default sec, min and hrs values from server, e.g. save them in coockie.

Upvotes: -1

Ganesh Jadhav
Ganesh Jadhav

Reputation: 2848

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.

Upvotes: 1

Related Questions