实现一个有开始暂停结束功能的计时器

最新推荐文章于 2023-12-20 13:35:09 发布

夏目.488

最新推荐文章于 2023-12-20 13:35:09 发布

阅读量119

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_70660527/article/details/134990626

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>简易计时器</title>
   </head>
   <body>
       <h1>实现计时器</h1>
       <p>
           <span id="hour">00</span>
           <span>:</span>
           <span id="minute">00</span>
           <span>:</span>
           <span id="second">00</span>
       </p>
       <button id="start">开始</button>
       <button id="pause">暂停</button>
       <button id="stop">结束</button>
       <script>
           // 初始化计时器变量
           var hour = 0;
           var minute = 0;
           var second = 0;
           var intervalID;

           // 获取页面元素的辅助函数
           function getEleByID(id) {
               return document.getElementById(id);
           }

           // 将数字转换为两位数形式的辅助函数
           function addZero(num) {
               return num >= 10 ? num : '0' + num;
           }

           // 更新页面上显示的时间
           function setTimeOnDom() {
               getEleByID('hour').innerText = addZero(hour);
               getEleByID('minute').innerText = addZero(minute);
               getEleByID('second').innerText = addZero(second);
           }

           // 开始按钮点击事件
           getEleByID('start').onclick = function() {
               // 防止重复点击开始按钮
               if (intervalID) {
                   return;
               }

               // 设置定时器，每秒更新时间
               intervalID = setInterval(function() {
                   second++;
                   if (second >= 60) {
                       second = 0;
                       minute++;
                   }
                   if (minute >= 60) {
                       minute = 0;
                       hour++;
                   }
                   // 停止计时器，避免时间超过24小时
                   if (hour >= 24) {
                       clearInterval(intervalID);
                   }
                   // 更新页面上显示的时间
                   setTimeOnDom();
               }, 1000);
           }

           // 暂停按钮点击事件
           getEleByID('pause').onclick = function() {
               // 清除定时器，暂停计时
               clearInterval(intervalID);
               intervalID = null;
           }

           // 结束按钮点击事件
           getEleByID('stop').onclick = function() {
               // 清除定时器，重置时间
               clearInterval(intervalID);
               intervalID = null;
               hour = minute = second = 0;
               // 更新页面上显示的时间
               setTimeOnDom();
           }
       </script>
   </body>
</html>