原生js实现秒表计时器功能

最新推荐文章于 2022-04-19 12:34:46 发布

枫哥和java

最新推荐文章于 2022-04-19 12:34:46 发布

阅读量2.3k

点赞数 2

分类专栏： JavaScript 文章标签： js

JavaScript 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

 本文实例为大家分享了带有开始、暂停、清除功能的js计时器，供大家参考，具体内容如下
 效果图：
  
 下面贴代码：
 
 <!DOCTYPE html> 
 
 < 
 html 
  lang 
 = 
 "en" 
 > 
 
 < 
 head 
 > 
 
 < 
 meta 
  charset 
 = 
 "UTF-8" 
 > 
 
 < 
 title 
 >计时器</ 
 title 
 > 
 
 < 
 script 
 > 
 
 var hour,minute,second;//时 分 秒 
 
 hour=minute=second=0;//初始化 
 
 var millisecond=0;//毫秒 
 
 var int; 
 
 function Reset()//重置 
 
 { 
 
 window.clearInterval(int); 
 
 millisecond=hour=minute=second=0; 
 
 document.getElementById('timetext').value='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; 
 
 } 
 
 document.getElementById('timetext').value=hour+'时'+minute+'分'+second+'秒'+millisecond+'毫秒'; 
 
 } 
 
 function stop()//暂停 
 
 { 
 
 window.clearInterval(int); 
 
 } 
 
 </ 
 script 
 > 
 
 </ 
 head 
 > 
 
 < 
 body 
 > 
 
 < 
 div 
  style 
 = 
 "text-align: center" 
 > 
 
 < 
 input 
  type 
 = 
 "text" 
  id 
 = 
 "timetext" 
  value 
 = 
 "00时00分00秒" 
  readonly>< 
 br 
 > 
 
 < 
 button 
  type 
 = 
 "button" 
  onclick 
 = 
 "start()" 
 >开始</ 
 button 
 > < 
 button 
  type 
 = 
 "button" 
  onclick 
 = 
 "stop()" 
 >暂停</ 
 button 
 > < 
 button 
  type 
 = 
 "button" 
  onclick 
 = 
 "Reset()" 
 >重置</ 
 button 
 > 
 
 </ 
 div 
 > 
 
 </ 
 body 
 > 
 
 </ 
 html 
 > 
原文地址：http://www.jb51.net/article/105783.htm