javascript /jquery秒表计时器代码_365体育备用网址官网资讯

javascript /jquery秒表计时器代码

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

JavaScript 秒表计时器

实例代码1:

<HTML lang="en">
<head>
<meta charset="UTF-8">
<title>javascript 计时器</title>
</head>
<body>
<input type="text" value="00:00">
<input type="button" value="开头">
<input type="button" value="结束">
<input type="button" value="重置">
<script>

  var oTxt=document.getElementsByTagName("input")[0];
  var oStart=document.getElementsByTagName("input")[1];
  var oStop=document.getElementsByTagName("input")[2];
  var oReset=document.getElementsByTagName("input")[3];
  var n= 0, timer=null;
  //开头计时
  oStart.onclick= function () {
    clearInterval(timer);
    timer=setInterval(function () {
      n++;
      var m=parseInt(n/60);
      var s=parseInt(n%60);
      oTxt.value=toDub(m)+":"+toDub(s);
    },1000/60);
  };
  //暂停并且清空计时器
  oStop.onclick= function () {
    clearInterval(timer);
  }
  //重置
  oReset.onclick= function () {
    oTxt.value="00:00";
    n=0;
  }
  //补零
  function toDub(n){
    return n<10?"0"+n:""+n;
  }
</script>
</body>
</html>

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

实例代码1:

<p><span id="clock">00:01:11:00</span>  
<input id="startB" type="button" value=" 开头计时 " onclick="run()">  
<input id="endB" type="button" value=" 计时暂停 " onclick="stop()" disabled=""> 
</p>

<p>
<input id="diff" type="text">  
<input id="next" type="text">  
</p>
<script type="text/javascript">  
var normalelapse = 100;  
var nextelapse = normalelapse;  
var counter;   
var startTime;  
var start = clock.innerText;   
var finish = "00:00:00:00";  
var timer = null;  
// 开头运行  
function run() {  
startB.disabled = true;  
endB.disabled = false;  
counter = 0;  
// 初始化开头时间  
startTime = new Date().valueOf();  

// nextelapse是定时时间, 初始时为100毫秒  
// 注意setInterval函数: 时间逝去nextelapse(毫秒)后, onTimer才开头执行  
timer = window.setInterval("onTimer()", nextelapse);   
}  
// 停止运行  
function stop() {  
startB.disabled = false;  
endB.disabled = true;  
window.clearTimeout(timer);  
}  
window.onload = function() {  
endB.disabled = true;  
}  
// 倒计时函数  
function onTimer()  
{  
if (start == finish)  
{  
  window.clearInterval(timer);  
  alert("time is up!");  
  return;  
}  
var hms = new String(start).split(":");  
var ms = new Number(hms[3]);  
var s = new Number(hms[2]);  
var m = new Number(hms[1]);  
var h = new Number(hms[0]);  
ms -= 10;  
if (ms < 0)  
{  
  ms = 90;  
  s -= 1;  
  if (s < 0)  
  {  
   s = 59;  
   m -= 1;  
  }  
  if (m < 0)  
  {  
   m = 59;  
   h -= 1;  
  }  
}  
var ms = ms < 10 ? ("0" + ms) : ms;  
var ss = s < 10 ? ("0" + s) : s;  
var sm = m < 10 ? ("0" + m) : m;  
var sh = h < 10 ? ("0" + h) : h;  
start = sh + ":" + sm + ":" + ss + ":" + ms;  
clock.innerText = start;  

// 清除上一次的定时器  
window.clearInterval(timer);  
// 自校验系统时间得到时间差, 由此得到下次所启动的新定时器的时间nextelapse  
counter++;   
var counterSecs = counter * 100;  
var elapseSecs = new Date().valueOf() - startTime;  
var diffSecs = counterSecs - elapseSecs;  
nextelapse = normalelapse + diffSecs;  
diff.value = counterSecs + "-" + elapseSecs + "=" + diffSecs;  
next.value = "nextelapse = " + nextelapse;  
if (nextelapse < 0) nextelapse = 0;  
// 启动新的定时器  
timer = window.setInterval("onTimer()", nextelapse);   
}  
</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>


效果:

 

如对本文有疑问,请提交到交流m88明升体育官网,广大热心网友会为你解答!! 点击进入m88明升体育官网


公布评论 (67人察看0条评论)
请自觉遵守互联网相关的政策法规,严禁公布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换环球娱乐 代理
最新评论
------分隔线----------------------------
条评论
Sitemap