描述:
- 点击开始,从60秒开始计时;
- 点击停止,时间会重置,等再次点击开始,就会从60开始;
- 点击暂停,倒计时暂停,再次点击开始,则从暂停时的时间开始倒计时
效果如图:
代码如下:
<button>开始</button>
<button>停止</button>
<button>暂停</button>
<div>倒计时:60秒</div>
<script>
let btn = document.querySelectorAll('button')
let con = document.querySelector('div')
let timer
let num = 60 //倒计时60秒,
//开始
btn[0].onclick=function(){
clearInterval(timer)
timer = setInterval(function(){
num--
if(num){
con.innerText = "倒计时:"+num+" 秒"
}else{
timer=clearInterval(timer)
}
},1000)
}
//暂停
btn[2].onclick = function(){
clearInterval(timer)
}
//停止
btn[1].onclick=function(){
clearInterval(timer)
num = 61//实现点击开始后,倒计时从60开始,而不是59
}
</script>