JavaScript实现带有开始、暂停、复位的秒表

  1. 首页
  2. 新闻资讯
  3. 正文
<!DOCTYPE html> <html lang="en">      <head>         <meta charset="UTF-8">         <title>Title</title>         <style>             #showTime {                 width: 300px;                 height: 60px;                 font-size: 60px;                 line-height: 60px;             }         </style>     </head>      <body>         <div>             <div id="showTime">00:00:00</div>             <button id="startBn">启动</button>             <button id="restBn">复位</button>         </div>         <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>

上一个：宠物回收平台有声波探测仪 宠物回收app

下一个：SpringBoot——整合druid数据源，以及使用druid数据源监控

热门文章

归纳