定时器的特性和应用
作用:每隔一段时间重复做一个事情
开启定时器的语法:setInterval(处理函数,时间间隔)
let 变量名 = setInterval会返回一个句柄(标识id)
clearInterval(变量名)可以清除定时器,传递的参数是句柄
<body>
<button>获取验证码5s</button>
<script>
// 1.获取按钮元素
`let btn = document.querySelector('button')`
// 2.定时器总时长
` let timeTotal = 5`
// 3.按钮点击事件
` btn.addEventListener('click', function () {`
// 4.点击事件触发后,总时长就开始倒数减1操作
`let timerId = setInterval(function () {`
// 总时长减1操作
`timeTotal`--
// 把倒计时时间赋值给按钮
`btn.innerText = `倒计时${timeTotal}s``
// disabled表单可操控属性 在倒计时的时候用户不能点击
`btn.disabled = true`
// 5.关闭定时器clearInterval(变量名)
`if (timeTotal === 0) {
timeTotal = 5
clearInterval(timerId)`
// disabled表单可操控属性 在倒计时的时候用户可以再次点击
` btn.disabled = false
btn.innerText = `获取验证码``
}
}, 1000)
})
</script>
</body>