分享一个定时器案例
<button>5s倒计时</button>
<script>
//获取选中对象
let button = document.querySelector('button')
//用获取的对象设置单点事件触发
button.addEventListener('click', function () {
//设置总时长
let timeCount = 5
//设置定时器
let timeId = setInterval(function () {
//设置显示倒计时效果展现
timeCount--
button.innerText = `${timeCount}s倒计时`
//设置时间结束后的效果
if (timeCount == -1) {
clearInterval(timeId)
button.disabled = false
button.innerText = '获取验证码'
}
//定时器的时间
}, 1000)
})
</script>
作用为:点击后按钮开始倒数,到0秒的时候按钮显示'获取验证码'
步骤用注释的形式写出来了,方便复习的时候查看。