使用JavaScript做一个网页秒表（含开始、暂停、继续、重置功能）

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title> </head> <body>     <div>00:00:00:00</div>     <button>开始</button>     <button disabled>暂停</button>     <button disabled>继续</button>     <button disabled>重置</button>      <script> //定义一个变量，根据定时器每秒执行一次，每次执行++自增操作，变量存储的数值，就会每秒+1。现在需要的记录效果是每0.01秒，也就是10毫秒执行一次。根据累计的数值执行进位。如果毫秒达到100就是1秒，如果秒达到60就是1分钟，如果分钟达到60就是1小时          var ms = 0;  // 毫秒         var s = 0;   // 秒         var m = 0;   // 分钟         var h = 0;   // 小时          // 单独定义存储时、分、秒、毫秒的字符串的变量来存储累加时间的执行结果，因为如果直接在ms、s、m、h变量上进行拼接操作，会影响++操作的执行                var msStr = '';         var sStr = '';         var mStr = '';         var hStr = '';          // 因为定时器是定义在函数内部，必须定义一个全局变量来存储定时器，在函数外部可以调用终止定时器         var time = 0;          // 获取div标签对象         var oDiv = document.querySelector('div');          // 获取按钮的标签对象         var oStart = document.querySelectorAll('button')[0]; // 开始         var oPause  = document.querySelectorAll('button')[1]; // 暂停         var oCont = document.querySelectorAll('button')[2]; //继续         var oReset = document.querySelectorAll('button')[3]; // 重置          // 给四个按钮添加点击事件效果                  // 开始按钮         oStart.onclick = function(){             // 点击开始按钮执行函数，执行秒表计时             setTimeStr();             // 可以点暂停             oPause.disabled = false;             // 其他标签都不能点             oStart.disabled = true;             oCont.disabled = true;             oReset.disabled = true;         }          // 暂停按钮         oPause.onclick = function(){             // 点击暂停按钮,清除定时器,终止秒表执行             clearInterval(time);             // 暂停本身和开始不能点             oPause.disabled = true;             oStart.disabled = true;             // 继续和重置能点了             oCont.disabled = false;             oReset.disabled = false;         }          // 继续按钮         oCont.onclick = function(){             // 点击继续按钮，继续执行定时器             setTimeStr();             // 暂停可以点             oPause.disabled = false;             // 其他都不能点             oCont.disabled = true;             oReset.disabled = true;             oStart.disabled = true;         }           // 重置按钮         oReset.onclick = function(){             // 点击重置按钮,将所有的数据都恢复到0的状态             // 所有变量存储的数据都是0, div中的内容也恢复到0                       // 定义所有存储时间的变量存储的数值为0              ms = 0;  // 毫秒             s = 0;   // 秒             m = 0;   // 分钟             h = 0;   // 小时             // 将div中的内容,设定为初始状态的00:00:00:00内容             oDiv.innerHTML = '00:00:00:00';             // 开始可以点             oStart.disabled = false;             // 其他都不能点             oPause.disabled = true;             oCont.disabled = true;             oReset.disabled = true;         }          // 每次点击开始按钮或者继续按钮都会调用执行函数，都会生成一个新的定时器。time中存储的是当前这个新的定时器，是整个程序中定时器的序号         // 例如点击开始按钮10次会生成10个定时，time中存储最后一个定时器的序号10         // 当点击暂停按钮时，清除的是time中存储的序号是10的这一个定时器，之前 1-9定时器仍然会执行               // 解决方法：点击开始按钮之后，在点击暂停按钮之前，禁止再次点击开始按钮。也就是在清除原有定时器之前，不允许生成新的定时器          // 定义函数，这个函数的作用就是记录执行的时间，有小时、分钟、秒、毫秒 4个部分。将记录的时间写入到div中，div中起始时默认都是0         function setTimeStr(){                     // 赋值操作,将定时器,存储在全局作用域变量中             // 此处只是赋值操作             time = setInterval(function(){                 ms++;                 // 毫秒是10毫秒一增加                 // ms存储的数值如果达到100，就是1秒种了                 // 给秒单位进位  s++                  // ms本身需要重新开始记录数值                 // 0:0:0:99  ---> 0:0:1:00                 if(ms == 100){                     s++;       // 秒进位                     ms = 0;    // ms本身清零,重新记录                 }                  if(s == 60){                     m++;       // 分钟进位                      s = 0;     // s秒 清零                 }                  if(m == 60){                     h++;       // 小时进位                      m = 0;     // m分钟 清零                 }                  // 小时记录可以每24小时清零一次，或者100小时清零一次，都可以                 if(h == 100){                     h = 0;                 }                  // 如果记录的时间小于0，要做补零操作                 if(ms < 10){                     msStr = '0' + ms;                 }else{                     msStr = ms;                 }                  if(s < 10){                     sStr = '0' + s;                 }else{                     sStr = s;                 }                  if(m < 10){                     mStr = '0' + m;                 }else{                     mStr = m;                 }                  if(h < 10){                     hStr = '0' + h;                 }else{                     hStr = h;                 }                 // 每次执行返回一个记录时间的字符串，将这个字符串写入到div中                 oDiv.innerHTML = `${hStr}:${mStr}:${sStr}:${msStr}`;             } , 10);                     console.log(time);         }        </script> </body> </html>
上一个：鸵鸟蛋贵不贵(鸵鸟蛋有什么价值)
下一个：给宠物医院的好评一百字给宠物医院的好评一百字怎么写
归纳

51 2025-04
90 2025-03
热门文章

归纳

51 2025-04

90 2025-03
