<!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>
实现效果：
当点击开始时：
当点击暂停时：
当点击继续时：
