定时器的特性和应用

177 阅读1分钟

定时器的特性和应用

作用:每隔一段时间重复做一个事情

开启定时器的语法: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>