以下是具体操作
<div>00:00:00</div>
<button>开始</button>
<button>暂停</button>
<button>重置</button>
<script>
// 获取标签对象
var oDiv=document.querySelector('div');
//1 2 3代表开始 停止 重置按钮
var oBtn1=document.querySelectorAll('button')[0];
var oBtn2=document.querySelectorAll('button')[1];
var oBtn3=document.querySelectorAll('button')[2];
// 定义开关变量
var flag=true;
// 设置变量存储 时分秒
var s=0;
var m=0;
var h=0;
//设置变量存储定时器的id
var time=0;
// 给开始按钮添加点击事件
oBtn1.addEventListener('click',()=>{
// 点击之后关闭开关变量
flag=false;
// 设置定时器
time=setInterval(()=>{
// 设置秒递增状态
s++;
// 当秒等于60的时候 使分钟加1 秒数归零
if(s === 60){
m++;
s=0;
}
// 当分钟等于60的时候 使小时加1 分钟归零
if(m === 60){
h++;
m=0;
}
// 将时间写入标签 采用三元运算符 不足十秒钟进行补零操作
oDiv.innerHTML=`${h>10?h:'0'+h}:${m>10?m:'0'+m}:${s>10?s:'0'+s}`
},1000)
});
// 给暂停按钮添加点击事件
oBtn2.addEventListener('click',function(){
// 开关变量的状态设置为开启
flag=true;
// 清除开始按钮里面的定时器
clearInterval(time);
})
// 给重置按钮添加点击事件
oBtn3.addEventListener('click',function(){
oDiv.innerHTML='00:00:00';
})
</script>
这样就完成制作秒表的操作了
总有些不想写代码的日子,因为总有事情比写代码更重要的事,比如楼外的蒹葭,比如今晚的月色