定时器案例解析

135 阅读1分钟

分享一个定时器案例

<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秒的时候按钮显示'获取验证码'

步骤用注释的形式写出来了,方便复习的时候查看。