javascript - How to make timer that can run on background also?

admin管理员组
文章数量:1024934

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 przbadu 6,0597 gold badges46 silver badges69 bronze badges

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

Add a ment |

4 Answers 4

Sorted by: Reset to default 2

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.

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.

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 przbadu 6,0597 gold badges46 silver badges69 bronze badges

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

Add a ment |

4 Answers 4

Sorted by: Reset to default 2

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.

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.

本文标签： javascriptHow to make timer that can run on background alsoStack Overflow

版权声明：本文标题：javascript - How to make timer that can run on background also? - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://it.en369.cn/questions/1745601301a2158471.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

369IT编程

javascript - How to make timer that can run on background also? - Stack Overflow

4 Answers 4

4 Answers 4

更多相关文章