一个jquery/javascript秒级计时器（可改为毫秒）

《一个jquery/javascript秒级计时器（可改为毫秒）》要点：
本文介绍了一个jquery/javascript秒级计时器（可改为毫秒），希望对您有用。如果有疑问，可以联系我们。

效果如图：

这个引用了bootstrap，具体样式可以自己修改

HTML代码部分：

<div class="btn-group " role="group">
       <button class="btn btn-default"  style="height: 43px;"><i class="fa fa-clock-o fa-spin fa-2x"></i></button>
       <button class="btn btn-default" name="timetext" id="timetext" style="height: 43px;min-width: 160px;">执行中......</button>
</div>

Jquery代码部分：

<script type="text/javascript">
       var hour,minute,second;//时 分 秒
       hour=minute=second=0;//初始化
       var millisecond=0;//毫秒
       var int;
       function Reset()       {//重置
              window.clearInterval(int);
              millisecond=hour=minute=second=0;
              $('#timetext').html('00 时 00 分 00 秒');  // 000 毫秒
       }
       function start()       {  //开始
              int=setInterval(timer,50);
       }
       function timer()       {//计时
              millisecond=millisecond+50;
              if(millisecond>=1000){
                     millisecond=0;
                     second=second+1;
              }
              if(second>=60) {
                     second=0;
                     minute=minute+1;
              }
              if(minute>=60) {
                     minute=0;
                     hour=hour+1;
              }
              var h = hour<10 ? '0'+hour : hour;
              var m = minute<10 ? '0'+minute : minute;
              var s = second<10 ? '0'+second : second;
              $('#timetext').html( h+' 时 '+m+' 分 '+s+' 秒');
       }
       function stop(){  //暂停
              window.clearInterval(int);
       }
       $(function(){
              start()
       });
</script>

jquery主要使用了$选择器，如果你没有使用JQ必要，可以改为 document.getElementById()代替，效果一样。

转载请注明本页网址：
http://www.vephp.com/jiaocheng/1960.html