思路:
1.获取元素
2.声明一个倒计时秒数,为按钮添加单击事件
3.开启定时器,秒数自减,按钮样式禁止点击
4.判断是否到0秒,0秒时关闭定时器,按钮样式可以点击
<input type="button" value="获取验证码" />
<script>
// 获取元素
let input = document.querySelector('input')
// console.log(input); 看一下有没有获取成功
// 声明一个变量为开始的时间
let timeCount = 5
// 单击事件
input.addEventListener('click', function () {
// 开启定时器
// timeId:创建这个定时器所返回的句柄
let timeId = setInterval(function () {
timeCount-- //每一秒减1
input.value = `倒计时${timeCount}秒`
input.disabled = true //disabled禁止属性,true可以点击
//判断时间是否到0,到0就停止定时器---清除定时器
if (timeCount == -1) { //这里注意细节,让0也显示出来 可以写-1
//清除定时器
clearInterval(timeId)
input.disabled = false //disabled禁止属性,false不可以点击
input.value = '获取验证码'
timeCount = 5 //一次循环后重新赋值 ,或者把最外面的声明时间变量放到单击事件里面
}
}, 1000)
})
</script>