JavaScript秒表开始、暂停、继续、重置功能的实现及连击的优化

JS中秒表的计时，是练习定时器的最好的方式之一，它包含了定时器的创建、清除、变量等相关问题，而秒表的功能实现是多样化的，比如：特定按钮的disabled、是否需要秒表的记录等。这里我用事件的委托的方法来实现秒表四个功能，譬如下面的代码，这里没有设置花哨的样式(主要还是审美力的问题~~~)，这里主要体现JS的代码思路，首先，先贴出一个gif图，让大家先看一下效果，欢迎大家评论、提异。

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">     <title>Document</title>     <style>         #box {             border: 1px solid black;             margin: 0 auto;             width: 200px;             height: 200px;         }          .show {             text-align: center;             font-size: 30px;             margin: 20px auto;         }          button:nth-of-type(1) {             margin-left: 7px;//为了让button按钮视觉上居中         }     </style> </head>  <body>     <div id="box">         <div class="show">00:00:00:00</div>         <button name="btn1">开始</button>         <button name="btn2" -disabled>暂停</button>         <button name="btn3" -disabled>继续</button>         <button name="btn4" -disabled>重置</button>     </div>     <script>         // 变量的定义         var oBox = document.querySelector('#box');         var oShow = document.querySelector('.show');         var time = 0; //全局定时器名         var h = 0;    //时，计时全局变量         var m = 0;    //分，计时全局变量         var s = 0;    //秒，计时全局变量         var ms = 0;   //1毫秒*10，计时全局变量         var hStr = 0; //时，存储计时后的显示数据         var mStr = 0; //分，存储计时后的显示数据         var sStr = 0; //秒，存储计时后的显示数据         var msStr = 0;//1ms*10，存储计时后的显示数据         //全局计时变量，是为了防止定时器清除时，数据清零          // 点击事件         oBox.onclick = function (e) {             //当然这里的参数e.target应当有兼容，主要是针对低版本IE浏览器 ||scrElement...             //这里就不写了             var eTarget = e.target;             if (eTarget.getAttribute('name') == 'btn1') {                 setTimeStr();             }             if (eTarget.getAttribute('name') == 'btn2') {                 clearInterval(time);             }             if (eTarget.getAttribute('name') == 'btn3') {                 setTimeStr();             }             if (eTarget.getAttribute('name') == 'btn4') {                 // 将所有的变量、内容恢复至初始状态                 h = 0;                 m = 0;                 s = 0;                 ms = 0;                 hStr = 0;                 mStr = 0;                 sStr = 0;                 msStr = 0;                 clearInterval(time);                 oShow.innerHTML = '00:00:00:00';             }         }          // 计时器         function setTimeStr() {             //防止调用函数时，多次创建定时器             clearInterval(time);             // 创建定时器             time = setInterval(function () {                 ms++;                 if (ms == 100) {                     ms = 0;                     s++;                 }                 if (s == 60) {                     s = 0;                     m++;                 }                 if (m == 60) {                     m = 0;                     h++;                 }                 if (h > 99) {                     h = 0;                 }                 msStr = ms >= 10 ? ms : '0' + ms;                 sStr = s >= 10 ? s : '0' + s;                 mStr = m >= 10 ? m : '0' + m;                 hStr = h >= 10 ? h : '0' + h;                 //每次定时，都有向页面写入内容                 return oShow.innerHTML = `${hStr}:${mStr}:${sStr}:${msStr}`;             }, 10)         }      </script> </body>  </html>

欢迎大家评论、提异哦！

上一个：五八同城狗狗领养（58同城宠物狗领养）

下一个：python 针对在子文件夹中的md文档实现批量md转word_python_

归纳

36 2025-04
90 2025-03

热门文章

归纳

36 2025-04

90 2025-03