js实现秒表后并实现每次暂停自动记录时间

<html>
  <script>
   var stop;
var ss=0;
var s=0;
var m=0;
var h=0;
function  clock(){
var btn = document.getElementById('start');
switch(btn.value){
case "start":
setTimeout("init()",10);
btn.value = "pause";
break;
case 'pause':
clearTimeout(stop);
btn.value = "start";
alert(document.getElementById("showtime").value);
break;
  }
}
function init(){
  ss++;
  var show =document.getElementById("showtime");
  if(m==60){
   h++;m=0;
  }
  if(s==60){
   m++;s=0;
  }
  if(ss==100){
   s++;ss=0;
  }
  if(m<10&&s<10){
  show.value= "0"+h+":"+"0"+m+":"+"0"+s+":"+ss;
  }
  else if(s<10&&m>=10){
  show.value= "0"+h+":"+m+":"+"0"+s+":"+ss;
  }else if(m<10&&s>=10){
  show.value="0"+h+":"+"0"+m+":"+s+":"+ss;
  }
  else show.value= "0"+h+":"+m+":"+s+":"+ss;
  stop=setTimeout("init()",10);
  }
function reset(){
h=0;
m=0;
s=0;
ss=0;
document.getElementById("showtime").value="00:00:00:00";
clearTimeout(stop);
var btn = document.getElementById('start');
btn.value = "start";
}
  </script>
  <body onLoad="reset();">
  <input type="text" id="showtime" name="showtime"/>
    <input type="button" onclick="clock();" id="start" name="start"  value="start"/>
    <input type="button" onclick="reset();" id="reset" name="reset"  value="reset"/>
    <div id="01">

    </div>
  </body>
</html>
基本的功能已经写好，但是想在每次暂停之后自动记录时间。求解！

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

保存在服务器吗？那么<?php
$currenttime=$_POST["showtime"];
echo "下面是把变量currenttime的值存入文件还是存入库呢？";
?><html>
  <script>
  var stop;
var ss=0;
var s=0;
var m=0;
var h=0;
function clock(){
var btn = document.getElementById('start');
switch(btn.value){
case "start":
setTimeout("init()",10);
btn.value = "pause";
break;
case 'pause':
clearTimeout(stop);
btn.value = "start";
alert(document.getElementById("showtime").value);
document.myform.submit();
break;
  }
}
function init(){
  ss++;
  var show =document.getElementById("showtime");
  if(m==60){
  h++;m=0;
  }
  if(s==60){
  m++;s=0;
  }
  if(ss==100){
  s++;ss=0;
  }
  if(m<10&&s<10){
  show.value= "0"+h+":"+"0"+m+":"+"0"+s+":"+ss;
  }
  else if(s<10&&m>=10){
  show.value= "0"+h+":"+m+":"+"0"+s+":"+ss;
  }else if(m<10&&s>=10){
  show.value="0"+h+":"+"0"+m+":"+s+":"+ss;
  }
  else show.value= "0"+h+":"+m+":"+s+":"+ss;
  stop=setTimeout("init()",10);
  }
function reset(){
h=0;
m=0;
s=0;
ss=0;
document.getElementById("showtime").value="00:00:00:00";
clearTimeout(stop);
var btn = document.getElementById('start');
btn.value = "start";
}
  </script>
  <body onLoad="reset();"><form method="POST" action="this.php" name="myform">
  <input type="text" id="showtime" name="showtime"/>
  <input type="button" onclick="clock();" id="start" name="start" value="start"/>
  <input type="button" onclick="reset();" id="reset" name="reset" value="reset"/>
  <div id="01">

  </div>
</form>  </body>
</html>
哦，不对！不能刷新页面，否则时间归0，看来得通过AJAX提交
还得保存起来，你可以保存到cookie中，javascript直接就可以，要不就得后台保存了
其實你可以用讀寫cookie的方式来实现,
暂停的时候马上写cookie,把当前时间写入cookie,当你需要得知一共暂停了多久你只需要读取cookie内的时间并用其和现在的时间做比对即可,下边我给你提供一个我用jquery写的读写cookie的函数,或许对你有帮助 //擴展方法,讀寫cookie
//$.setCookie("a1","abc",999);寫
//aaa=$.getCookie("a1");讀
$.extend({getCookie:function(sName){
var aCookie=document.cookie.split("; ");
for(var i=0;i<aCookie.length;i++){
var aCrumb=aCookie[i].split("=");
if(sName==aCrumb[0]){return decodeURIComponent(aCrumb[1]);}
}
return '';
},setCookie:function(sName,sValue,sExpires){
var sCookie=sName+"="+encodeURIComponent(sValue);
if(sExpires!=null){sCookie+="; expires="+sExpires;}
document.cookie=sCookie;
},removeCookie:function(sName){
document.cookie=sName+"=; expires=Fri, 31 Dec 1999 23:59:59 GMT;";
}});
自己以前写的<div style="width:200px;float:left">
<fieldset>
<legend>
秒表1
</legend>
<input onclick="startclock(0);" type="button" value="start">
<input onclick="haltclock(0);" type="button" value="halt">
<input onclick="stopclock(0);" type="button" value="stop">
<hr><div id="d0">00:00:00.00</div>
</fieldset>
</div><div style="width:200px;float:left">
<fieldset>
<legend>
秒表2
</legend>
<input onclick="startclock(1);" type="button" value="start">
<input onclick="haltclock(1);" type="button" value="halt">
<input onclick="stopclock(1);" type="button" value="stop">
<hr><div id="d1">00:00:00.00</div>
</fieldset>
</div><div style="width:200px;float:left">
<fieldset>
<legend>
秒表3
</legend>
<input onclick="startclock(2);" type="button" value="start">
<input onclick="haltclock(2);" type="button" value="halt">
<input onclick="stopclock(2);" type="button" value="stop">
<hr><div id="d2">00:00:00.00</div>
</fieldset>
</div><div style="width:200px;float:left">
<fieldset>
<legend>
秒表4
</legend>
<input onclick="startclock(3);" type="button" value="start">
<input onclick="haltclock(3);" type="button" value="halt">
<input onclick="stopclock(3);" type="button" value="stop">
<hr><div id="d3">00:00:00.00</div>
</fieldset>
</div><script language=javascript>

</script>