<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 给div样式 -->
<style>
*{margin: 0;padding: 0;}
div{
width: 300px;
height: 40px;
font-size: 30px;
background: black;
color: white;
text-align: center;
line-height: 40px;
}
</style>
</head>
<body>
<div>00:00:00</div>
<button>开始</button>
<button>暂停</button>
<button>重置</button>
<script>
// 对存在标签进行获取
var oDiv = document.querySelector('div')
var oBtn1 = document.querySelectorAll('button')[0];
var oBtn2 = document.querySelectorAll('button')[1];
var oBtn3 = document.querySelectorAll('button')[2];
// 分别设定计时器的时 分 秒的变量
var h = 0 ;
var m = 0 ;
var s = 0 ;
//定义变量time 用于区分计时器
var time = 0;
// 定义一个 bool 值 用于处理多个计时器同时产生的情况
var bool = true;
// 为开始button绑定click事件 作用：开始计时
// 点击开始button 开始计时 并实现一个计时简单的累加
oBtn1.addEventListener('click',function(){
// 因为定时器较为特殊 若未作处理 每点击开始按钮一次均会产生 多余的定时器 从而影响我们函数正常的执行
// 设定以下if判断操作后 无论点击多少 均只会产生一个定时器
// 此方法也是目前较为常见的方法之一
if(bool){
bool = false
}else{
return;
}
// 设定定时器 设定原理为 每秒执行一次 秒数 的累加
// 并将计时器的位置存放于变变量 time 中
time = setInterval(function(){
s++;
if(s ===60){
m++
s = 0;
}
if(m===60){
h++;
m = 0;
}
// 将累加得来的时间均写入div标签中 ， 同时执行每秒写入一次 以达到刷新的效果
oDiv.innerHTML = `${h < 10 ? '0' + h : h }:${m < 10 ? '0' + m : m }:${s < 10 ? '0' + s : s }`
},1000)
})
// 为暂停button绑定 click事件 作用：暂停计时器
oBtn2.addEventListener('click',function(){
// 清楚计时器 以达到暂停 效果的作用
// 并将bool值设置为 ture 将值重新传回全局作用域的 bool值 方便重新判断定位器
clearInterval(time);
bool = true;
})
// 为清楚button绑定 click 事件 作用：将 h m s 重置为 0
oBtn3.addEventListener('click',function(){
h = 0;
m = 0;
s = 0;
oDiv.innerText = '00:00:00';
})
// @码上成功~
</script>
</body>
</html>
724
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
