Question

我正在使用rails和编写的javascript代码来显示从00:00:00开始的计时器。

[注意：我有两个按钮开始和停止以启动计时器并停止计时器]


    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 web应用程序中运行良好。但是，如果我将重定向到另一个页面并返回到此页面，我将丢失计时器值。

在这里，我希望时钟在页面重定向后也能连续运行。

如何解决这个问题？

Answer 1

获取时间戳...将其保存在某处并将其作为变量传递给下一页

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

让时间过去了

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

将此转换为hh:mm:ss.msec或其他......

下一页只需要start值，有很多方法可以传递它。 php，js，get，post ....以及更多。

setTimeout()对于计时器也不准确。

这是一个使用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>

正如我所说的......你可以将起始值存储在任何地方......所以如果你有任何偏好......只需告诉我，我就可以改变你的代码。

Answer 2

因为您正在重定向，所以java脚本计时器不会这样做。您应该使用系统时间。您可以在从页面重定向时从会话变量中获取一些帮助，以便在计时器启动时保存时间戳。

Answer 3

您可以使用会话或Cookie为变量sec, min, hour设置初始值。并将此文件包含在您希望计时器应在后台运行的所有页面中。

function timer(){

sec++;

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

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

setTimeout(timer(), 1000);
}

仅在显示计时器的页面中将值添加到DOM。

Answer 4

尝试从服务器发送默认的 sec ， min 和 hrs 值，例如将它们保存在coockie中。

如何制作可以在后台运行的计时器？

4 个答案: