<!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毫秒执行一次 // 根据累计的数值,执行进位 ms 如果达到 100,就是1秒 // 如果 秒 达到 60 就是 1分钟 // 如果 分钟 达到 60 就是 1小时 // 获取按钮的标签对象 var oBtnStart = document.querySelectorAll('button')[0]; var oBtnPause = document.querySelectorAll('button')[1]; var oBtnContinue = document.querySelectorAll('button')[2]; var oBtnReset = document.querySelectorAll('button')[3]; var hour = minutes = seconds = millisecond = 0; // 定义存储 时 分 秒 毫秒 字符串的变量 // 如果直接在 millisecond seconds minutes hour 变量上进行 拼接操作,会影响 ++操作的执行 // 单独的建立变量,来存储累加时间的执行结果 var ms = ''; var s = ''; var m = ''; var h = ''; // 因为定时器,是定义在函数内部, // 必须定义一个全局变量,来存储定时器 // 在函数外部可以调用,终止定时器 var time = 0; // 获取div标签对象 var oDiv = document.querySelector('div'); // 开始按钮 oBtnStart.onclick = function(){ // 点击开始按钮,执行函数,执行秒表计时 timer(); oBtnStart.disabled = true; oBtnPause.disabled = false; oBtnContinue.disabled = true; oBtnReset.disabled = true; } // 暂停按钮 oBtnPause.onclick = function(){ // 点击暂停按钮,清除定时器,终止秒表执行 clearInterval(time); oBtnStart.disabled = true; oBtnPause.disabled = true; oBtnContinue.disabled = false; oBtnReset.disabled = false; } // 继续按钮 oBtnContinue.onclick = function(){ // 点击继续按钮,继续执行定时器 timer(); oBtnStart.disabled = true; oBtnPause.disabled = false; oBtnContinue.disabled = true; oBtnReset.disabled = true; } // 重置按钮 oBtnReset.onclick = function(){ // 点击重置按钮,将所有的数据,都恢复到0的状态 // 所有变量存储的数据都是 0 , div中的内容,也恢复到0 hour = minutes = seconds = millisecond = 0; oDiv.innerHTML = '00:00:00:00' oBtnStart.disabled = false; oBtnPause.disabled = true; oBtnContinue.disabled = true; oBtnReset.disabled = true; } // 计时函数 function timer(){ // 赋值操作,将定时器,存储在全局作用域变量中 time = setInterval(function(){ millisecond++; if( millisecond == 100){ seconds++; millisecond = 0; } if( seconds == 60 ){ minutes++; seconds = 0; } if( minutes == 60 ){ hour++; minutes = 0; } // 补零操作 // 如果记录的时间小于0,要做补零操作 if( millisecond < 10 ){ ms = '0' + millisecond; }else{ ms = millisecond; } if( seconds < 10 ){ s = '0' + seconds; }else{ s = seconds; } if( minutes < 10 ){ m = '0' + minutes; }else{ m = minutes; } if( hour < 10 ){ h = '0' + hour; }else{ h = hour; } // 每次执行,返回一个记录时间的字符串 // 将这个字符串,写入到div中 oDiv.innerHTML = ` ${h}:${m}:${s}:${ms} ` },10); } </script> </body> </html> 实现效果：
当点击开始时：
当点击暂停时：
当点击继续时：