倒计时(获取验证码案例)

251 阅读1分钟

思路:

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>