<div>00:00:00:000</div>
<button >开始</button>
<button>停止</button>
<button>重置</button>
<script>
// 秒表定义时,需要注意的一个关键问题
// 设定世间间隔的最小数值
// 显示器的刷新率 表示 一秒钟 显示器可以刷新的次数
// 60Hz 赫兹 表示 一秒钟可以刷新 60次 , 应该是 16.66666... 毫秒
// 也就是 程序 最快也要 16毫秒 刷新一次
// 一般设定定时器,最短 100毫秒
// 1,获取标签对象
// 获取div标签对象
const oDiv = document.querySelector('div');
// 获取button标签对象
const oStart = document.querySelectorAll('button')[0];
const oStop = document.querySelectorAll('button')[1];
const oReset = document.querySelectorAll('button')[2];
// 重置按钮,只有停止之后才能使用
oReset.disabled = true;
// 2,定义变量的初始值
// 记录小时,分,秒,毫秒数值的变量
var ms = 0; // 毫秒
var s = 0; // 秒
var m = 0; // 分钟
var h = 0; // 小时
// 存储小时,分钟,秒字符串的变量
let rS = '';
let rM = '';
let rH = '';
// 定义变量来存储定时器,所有的程序都可以调用这个变量
let time;
// 给button按钮添加点击事件,执行响应的操作
// 需要给标签添加禁用效果
// 一开始,button开始标签可以点击
// 第一次点击之后,就禁用,不能再次点击
// 点击停止之后,可以再次使用开始按钮
// 给标签添加禁用属性
// 标签对象.disabled = true / false 布尔数值
// 所有的布尔属性,都是通过布尔类型数值来控制是否执行
// true就是执行属性效果
// false就是不执行属性效果
// 最好定义成布尔类型数值的形式,如果写成字符串也可以执行,但是不规范
// 开始按钮的点击事件
oStart.addEventListener('click' , ()=>{
// 点击button按钮,启动定时器
// 在函数内部只是给变量赋值
time = setInterval( ()=>{
// 调用秒表函数
mySetTime(oDiv);
} , 100 );
// 禁用开始button按钮
oStart.disabled = true;
})
// 停止按钮的点击事件
oStop.addEventListener('click' , ()=>{
clearInterval(time);
// 点击停止按钮,让开始按钮可以重新使用,让重置按钮可以使用
oStart.disabled = false;
oReset.disabled = false;
})
// 重置按钮的点击事件
oReset.addEventListener('click' , ()=>{
// 1,给所有的变量清零
ms = 0;
s = 0;
m = 0;
h = 0;
rS = '';
rM = '';
rH = '';
// 2,给div内容,恢复到000
oDiv.innerHTML = '00:00:00:000';
})
// 生成秒表的函数
// 参数是要写入内容的标签对象
function mySetTime(element){
// 每个时间间隔,ms都是 累加 1
// 10次时间间隔,就是1秒
ms += 1;
if(ms % 10 === 0 && ms > 0){
// 给秒累加1
s += 1;
// 给毫秒重新赋值为0,重新计时
ms = 0;
}
if(s % 60 === 0 && s > 0 ){
// 给分钟累加1
m += 1;
// 给秒重新赋值为0,重新计时
s = 0;
}
if(m % 60 === 0 && m > 0){
// 给小时累加1
h += 1;
// 给秒重新赋值为0,重新计时
m = 0;
}
if(s < 10 ){
rS = '0' + s;
}else{
rS = s;
}
if(m < 10 ){
rM = '0' + m;
}else{
rM = m;
}
if(h < 10 ){
rH = '0' + h;
}else{
rH = h;
}
element.innerHTML = `${rH}:${rM}:${rS}:${ms}00`;
}
// 总结:
// 1,定时器的时间间隔,最短是 16.7 毫秒 最好设定为 100毫秒
// 2,定时器的清除关闭
// 如通一次启动过多的定时器 --- 上一个定时器还没有停止关闭,下一个定时器就开始启动
// 此时去停止定时器,一般关闭都是最后一个定时器,会有其他定时器没有关闭,造成定时器仍然在继续执行
// 例子: 多次点击 开始 按钮 , 生成多个定时器 1,2,3,4,5...
// 变量 time 中只会 存储最后一个 定时器的序号
// 此时清除定时器 clearInterval(time) 只是关闭了最后一个定时器
// 之前的定时器,仍然再执行
// 3,防止定时器加载过快
// 通过操作,启动定时器后,不允许再次启动新的定时器
// 除非关闭了上一个定时器,才能再次开启下一个定时
// 此时使用方法是:
// 给button按钮添加禁用属性
// 防止再次点击button按钮,再次启动定时器
// 点击停止按钮时,清除上一个定时器
// 取消开始按钮的禁用属性,可以再次点击,再次启动新的定时器
// 4,实现时间累加的方法有很多,只要能最终时间就可以
//