Как сделать таймер, который также может работать в фоновом режиме?

Я работаю над рельсами и написал код javascript для отображения таймера, который начинается с 00:00:00.

[ПРИМЕЧАНИЕ: у меня есть две кнопки start и stop для запуска таймера и его остановки]


    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);
    }

Теперь это нормально работает в моем веб-приложении rails. Но если я перенаправлю на другую страницу и вернусь на эту страницу, я теряю значение таймера.

Здесь я хочу, чтобы часы работали непрерывно и после перенаправления страницы.

Как это исправить?


javascript timer countdowntimer ruby-on-rails-3.2
person przbadu    schedule 24.07.2013    source источник
comment
Вы можете использовать HTML 5 Storage для хранения времени начала при запуске таймера. Затем при загрузке страницы найдите это значение и пересчитайте, сколько времени прошло.   -  person musefan    schedule 24.07.2013

Ответы (4)


arrow_upward
1
arrow_downward

Поскольку вы перенаправляете, таймер java-скрипта не работает. Вместо этого вы должны использовать системное время. Вы можете воспользоваться переменными сеанса при перенаправлении со страницы, чтобы сохранить отметку времени при запуске таймера.

person Ganesh Jadhav    schedule 24.07.2013

arrow_upward
1
arrow_downward

получить метку времени ... сохранить ее где-нибудь и передать как переменную на следующую страницу

var start=new Date().getTime();

чтобы время прошло

var currentMillisecondsPassed=new Date().getTime()-start;

преобразовать это в hh:mm:ss.msec или что-то еще ...

следующей странице нужно только значение start, и есть много способов передать его ... php, js, get, post ... и многое другое.

setTimeout() также неточно для таймеров.

вот пример передачи значения с запросом ..

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

как я уже сказал ... вы можете сохранить начальное значение где угодно ... так что, если у вас есть какие-либо предпочтения ... просто скажите мне, и я могу изменить код для u.

person cocco    schedule 24.07.2013
comment
Спасибо большое за вашу помощь. Это действительно помогает мне - person przbadu; 31.07.2013

arrow_upward
0
arrow_downward

Вы можете установить начальные значения для переменных sec, min, hour с помощью сеанса или файлов cookie. И включите этот файл на все страницы, на которых вы хотите, чтобы таймер работал в фоновом режиме.

function timer(){

sec++;

if(sec>=60){
min++;
sec=0;
}

if(min>=60){
hrs++;
min=0;
}

setTimeout(timer(), 1000);
}

И добавляйте значения в DOM только на той странице, на которой вы показываете таймер.

person Abhilash M A    schedule 24.07.2013
comment
setTimeout НЕ гарантированно запускается ровно каждые ‹period›, поэтому часы, реализованные таким образом, всегда будут «терять время» в различных количествах. - person Mike Brockington; 09.05.2019

arrow_upward
-1
arrow_downward

Попробуйте отправить с сервера значения сек, мин и часов по умолчанию, например спасти их в киске.

person Enam    schedule 24.07.2013