<body>
<div>00:00:00</div> 创建 标签实现秒表初始样子
<button>开始</button> 创建 按钮1
<button>停止</button> 创建 按钮2
<button>恢复</button> 创建 按钮3
<script>
var oDiv = document.querySelector('div'); 获取 秒表标签
var oBut1 = document.querySelectorAll('button')[0]; 获取 按钮1
var oBut2 = document.querySelectorAll('button')[1]; 获取 按钮2
var oBut3 = document.querySelectorAll('button')[2]; 获取 按钮3
var h = 0; 初始化 小时 0
var m = 0; 初始化 分钟 0
var s = 0; 初始化 秒 0
var res = true; (秒表开关的初始化赋值,
为了让秒表不会按开始后加快 停不了)
oBut1.addEventListener('click', function () { 添加事件1: 点击 "开始"
if(res === true){ 秒表开关为 "true" 进入程序
res = false; 进入后开关 赋值 "false"
}else{
return; 第二次点击时不会进入定时器累加
}
var time = setInterval(function () { 设定 定时器 1秒触发一次
s++; 进入计时 秒累加1
if (s === 60) { 秒 累加到 60时
s = 0; 秒 清零
m++; 分钟开始 累加
}
if (m === 60) { 分钟 累加到 60时
m = 0; 分钟 清零
h++; 小时开始 累加
}
if (h === 60) { 小时 累加到 60时 h = 0; 小时 清零
}
oDiv.innerHTML = `${h < 10 ? `0` + h : h}:${m < 10 ? `0` + m : m}:${s < 10 ? `0` + s : s}`;
}, 1000) 这一步向DIV中写入 小时:分钟:秒 在这里 前导补零
oBut2.addEventListener('click',function(){ 添加事件2: 点击 "停止"
clearInterval(time); 清楚定时器 秒表停止
res=true; (开关 赋值 "true" 为了下一次可以继续进入定时器 连续计时)
})
oBut3.addEventListener('click',function(){ 添加事件3: 点击 "恢复"
s=0; 恢复默认 秒 清零
m=0; 恢复默认 分钟 清零
h=0; 恢复默认 小时 清零
oDiv.innerHTML = `00:00:00`; 写入 清零
})
})
</script>
570
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
