您现在的位置： 365建站网 > 365文章 > javascript /jquery秒表计时器代码

javascript /jquery秒表计时器代码

文章来源：365jz.com     点击数：586    更新时间：2018-01-10 09:23   参与评论

javascript 秒表计时器

实例代码1：

</>code
  1. <html lang="en">
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>javascript 计时器</title>
  5. </head>
  6. <body>
  7. <input type="text" value="00:00">
  8. <input type="button" value="开始">
  9. <input type="button" value="结束">
  10. <input type="button" value="重置">
  11. <script>
  12.   var oTxt=document.getElementsByTagName("input")[0];
  13.   var oStart=document.getElementsByTagName("input")[1];
  14.   var oStop=document.getElementsByTagName("input")[2];
  15.   var oReset=document.getElementsByTagName("input")[3];
  16.   var n= 0, timer=null;
  17.   //开始计时
  18.   oStart.onclick= function () {
  19.     clearInterval(timer);
  20.     timer=setInterval(function () {
  21.       n++;
  22.       var m=parseInt(n/60);
  23.       var s=parseInt(n%60);
  24.       oTxt.value=toDub(m)+":"+toDub(s);
  25.     },1000/60);
  26.   };
  27.   //暂停并且清空计时器
  28.   oStop.onclick= function () {
  29.     clearInterval(timer);
  30.   }
  31.   //重置
  32.   oReset.onclick= function () {
  33.     oTxt.value="00:00";
  34.     n=0;
  35.   }
  36.   //补零
  37.   function toDub(n){
  38.     return n<10?"0"+n:""+n;
  39.   }
  40. </script>
  41. </body>
  42. </html>

计时器设置运行间隔那里，一开始设置了100，其实是不对的，因为 1秒=1000毫秒；我们要分成60个数字来显示，所以还是要除以60才对。
 

实例代码1：

</>code
  1. <p><span id="clock">00:01:11:00</span>  
  2. <input id="startB" type="button" value=" 开始计时 " onclick="run()">  
  3. <input id="endB" type="button" value=" 计时暂停 " onclick="stop()" disabled=""> 
  4. </p>
  5. <p>
  6. <input id="diff" type="text">  
  7. <input id="next" type="text">  
  8. </p>
  9. <script type="text/javascript">  
  10. var normalelapse = 100;  
  11. var nextelapse = normalelapse;  
  12. var counter;   
  13. var startTime;  
  14. var start = clock.innerText;   
  15. var finish = "00:00:00:00";  
  16. var timer = null;  
  17. // 开始运行  
  18. function run() {  
  19. startB.disabled = true;  
  20. endB.disabled = false;  
  21. counter = 0;  
  22. // 初始化开始时间  
  23. startTime = new Date().valueOf();  
  24. // nextelapse是定时时间, 初始时为100毫秒  
  25. // 注意setInterval函数: 时间逝去nextelapse(毫秒)后, onTimer才开始执行  
  26. timer = window.setInterval("onTimer()", nextelapse);   
  27. }  
  28. // 停止运行  
  29. function stop() {  
  30. startB.disabled = false;  
  31. endB.disabled = true;  
  32. window.clearTimeout(timer);  
  33. }  
  34. window.onload = function() {  
  35. endB.disabled = true;  
  36. }  
  37. // 倒计时函数  
  38. function onTimer()  
  39. {  
  40. if (start == finish)  
  41. {  
  42.   window.clearInterval(timer);  
  43.   alert("time is up!");  
  44.   return;  
  45. }  
  46. var hms = new String(start).split(":");  
  47. var ms = new Number(hms[3]);  
  48. var s = new Number(hms[2]);  
  49. var m = new Number(hms[1]);  
  50. var h = new Number(hms[0]);  
  51. ms -= 10;  
  52. if (ms < 0)  
  53. {  
  54.   ms = 90;  
  55.   s -= 1;  
  56.   if (s < 0)  
  57.   {  
  58.    s = 59;  
  59.    m -= 1;  
  60.   }  
  61.   if (m < 0)  
  62.   {  
  63.    m = 59;  
  64.    h -= 1;  
  65.   }  
  66. }  
  67. var ms = ms < 10 ? ("0" + ms) : ms;  
  68. var ss = s < 10 ? ("0" + s) : s;  
  69. var sm = m < 10 ? ("0" + m) : m;  
  70. var sh = h < 10 ? ("0" + h) : h;  
  71. start = sh + ":" + sm + ":" + ss + ":" + ms;  
  72. clock.innerText = start;  
  73. // 清除上一次的定时器  
  74. window.clearInterval(timer);  
  75. // 自校验系统时间得到时间差, 由此得到下次所启动的新定时器的时间nextelapse  
  76. counter++;   
  77. var counterSecs = counter * 100;  
  78. var elapseSecs = new Date().valueOf() - startTime;  
  79. var diffSecs = counterSecs - elapseSecs;  
  80. nextelapse = normalelapse + diffSecs;  
  81. diff.value = counterSecs + "-" + elapseSecs + "=" + diffSecs;  
  82. next.value = "nextelapse = " + nextelapse;  
  83. if (nextelapse < 0) nextelapse = 0;  
  84. // 启动新的定时器  
  85. timer = window.setInterval("onTimer()", nextelapse);   
  86. }  
  87. </script>

效果：




jquery秒表计时器代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   body{margin:0;padding:0;}
   .box{margin:10px auto;width:400px;}
   #showtime{margin:20px;margin-bottom: 20px;text-align: center;}
   span{font-size: 60px;}
   button{width:100px;height:100px;border-radius: 50px;border:0;outline:none ;margin:0 48px;font-size:24px;}
   #record{margin-top:20px;}
   #record div{width:400px;height:30px;border-bottom:1px dotted #666;}
   #record span{font-size:20px;}
   .left{float:left;}
   .right{float:right;}
  </style>
</head>
<body>
  <div class="box">
   <div id="showtime">
    <span>00</span>
    <span>:</span>
    <span>00</span>
    <span>:</span>
    <span>00</span>
   </div>
   <div class="bnt">
    <button>记次</button>
    <button>启动</button>
   </div>
   <!--记录显示的次数-->
   <div id="record">
    <!--/*<div>
     <span class="left">第一次记录:</span>
     <span class="right">00:00:00</span>
    </div>*/-->
   </div>
  </div>
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script>
  //添加事件
  $(function(){
    var min=0;
    var sec=0;
    var ms=0;
    var timer=null;
    var count=0;
  //点击第一个按钮
   $('.bnt button:eq(0)').click(function(){
    if($(this).html()=='记次'){
     if(!timer){
      alert("没有开启定时器!");
      return;
     }
      count++;
      var right1="<span class='right'>"+$('#showtime').text()+"</span>";
       var insertStr = "<div><span class='left'>记次"+count+"</span>" +right1+"</div>";
      
      $("#record").prepend($(insertStr));
    
    }else{
     min=0;
     sec=0;
     ms=0;
     count=0;
     $('#showtime span:eq(0)').html('00');
     $('#showtime span:eq(2)').html('00');
     $('#showtime span:eq(4)').html('00');
     $('#record').html('');
     }
   
   });
  //点击第二个按钮
   $('.bnt button:eq(1)').click(function(){
    if($(this).html()=='启动'){
     $(this).html('停止');
     $('.bnt button:eq(0)').html('记次');
     clearInterval(timer);
     timer=setInterval(show,10)
    }else{
     $(this).html('启动');
     $('.bnt button:eq(0)').html('复位');
     clearInterval(timer);
    }
   });
  //生成时间
   function show(){
    ms++;
    if(sec==60){
     min++;sec=0;
    }
    if(ms==100){
     sec++;ms=0;
    }
    var msStr=ms;
    if(ms<10){
     msStr="0"+ms;
    }
    var secStr=sec;
    if(sec<10){
     secStr="0"+sec;
    }
    var minStr=min;
    if(min<10){
     minStr="0"+min;
    }
    $('#showtime span:eq(0)').html(minStr);
    $('#showtime span:eq(2)').html(secStr);
    $('#showtime span:eq(4)').html(msStr);
   }
  })
  </script>
</body>
</html>


效果：

 

如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛

您可能感兴趣的文章:

发表评论 (586人查看，0条评论)
请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。
昵称：
最新评论
------分隔线----------------------------
大家感兴趣的内容
最近更新的内容

公司信息

· 网站介绍
· 联系我们
· 加入我们
· 服务条款

快速入口

· 365软件
· 杰创官网
· 建站工具
· 网站大全

其它栏目

· 建站教程
· 365学习

业务咨询

· 技术支持
· 服务时间：9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2024 版权所有 鄂ICP备17013400号