首页 >> 全栈工程 >>JavaScript >> JavaScript怎么实现简单的秒表效果?(代码示例)
详细内容

JavaScript怎么实现简单的秒表效果?(代码示例)

时间:2020-07-23        阅读

JavaScript怎么实现简单的秒表效果?下面本篇文章给大家通过代码示例介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。


描述:

实现一个简单的秒表,点击启动按钮时开始计时,随后启动按钮变为暂停,

点击暂停暂停计时,点击复位回到最初始状态。

效果:

1.jpg

代码:

<!DOCTYPE html> <html> <head>  <meta charset="UTF-8">  <title>Title</title>  <style>  #showTime  {   width: 300px;   height: 60px;   font-size: 60px;   line-height: 60px;  }  </style> </head> <body>  <p>  <p id="showTime">00:00:00</p>  <button id="startBn">启动</button>  <button id="restBn">复位</button>  </p> <script>  //——————  var time,showTime,startBn,restBn,pauseDate;  //布尔开关  var bool=false;  //暂停的累计时间  var pauseTime=0;    init();  function init() {  showTime=document.getElementById("showTime");  startBn=document.getElementById("startBn");  restBn=document.getElementById("restBn");  startBn.addEventListener("click",clickHandler);//开始按钮 ~ 暂停按钮  restBn.addEventListener("click",clickHandler);//复位按钮  setInterval(animation,16);  }    //转化时间函数  function animation() {  if(!bool) return;  //前时间减去上次开启时间减去暂停累计时间  var times=new Date().getTime()-time-pauseTime;  var minutes=Math.floor(times/60000);//毫秒转化为分钟  var seconds=Math.floor((times-minutes*60000)/1000);//已知分钟   将time减去分钟 除去1000得出 秒  var ms=Math.floor((times-minutes*60000-seconds*1000)/10);//  showTime.innerHTML=   (minutes<10 ? "0" +minutes : minutes)+":"   +(seconds<10 ? "0"+seconds :seconds)+":"  +(ms<10 ? "0"+ms : ms);  }    //点击时的事件  function clickHandler(e) {  e= e || window.event;  if(this===startBn){   bool=!bool;   if(bool){   this.innerHTML="暂停";   //如果我们上一次暂停时间是空,表示没有暂停过,因此,直接返回0   //如果上次的暂停时间是有值得,用当前毫秒数减去上次的毫秒数,这样就会得到暂停时间   pauseTime+=(!pauseDate ? 0 : new Date().getTime()-pauseDate);   if(time) return;   time=new Date().getTime();   return;//是为bool判断跳出   }     this.innerHTML="启动";   pauseDate=new Date().getTime();   return;//是为this是否等于startBn判断跳出  }  startBn.innerHTML="启动";  pauseTime=0;  pauseDate=null;  bool=false;  time=0;  showTime.innerHTML="00:00:00";  }   </script> </body> </html>

更多web前端开发知识,请查阅ots网络安全门户 !!!


最新评论
请先登录才能进行回复登录
技术支持: 建站ABC | 管理登录