定时器

106 阅读1分钟

1.每隔一段时间就重复做一个操作

语法: setInterval(执行的函数,时间间隔)

// 开启定时器 以毫秒为单位 timeId:句柄

let timeId= setInterval(function () { }, 1000)

//关闭定时器

clearInterval(timeId)


验证码,倒计时案例:

<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>