<!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>
