定时器+自动切换图片添加定时器+关闭定时器自动切换图片添加定时器+关闭定时器自动切换图片添加定时器+关闭定时器自动

添加定时器+关闭定时器

<body>
  <button>获取验证码</button>
  <script>
    // 添加定时器的语法：setInterval(你想执行的操作，间隔时间)
    // 间隔时间以毫秒作为单位
    // 

    let btn = document.querySelector('button')
    let timeCount = 6

    btn.addEventListener('click', function () {
      // 开启定时器
      // timeId:就是创建这个定时器所返回的句柄，这个句柄与当前定时器关联
      let timeId = setInterval(function () {
        timeCount--
        btn.innerText = `倒计时${timeCount}s`
        // 禁用按钮
        btn.disabled = true

        // 判断时间是否到0停止---清除定时器
        if (timeCount == -1) {
          clearInterval(timeId)
          // 开启按钮
          btn.disabled = false
          btn.innerText = `获取验证码`
        }
      }, 1000)
    })
  </script>
</body>

自动切换图片

<body>
  <div>
    <img src="./images/b01.jpg" alt="" />
    <p>第1张图片</p>
  </div>

  <script>
    // 获取元素
    let img = document.querySelector('img') //设置scr属性
    let p = document.querySelector('p') //设置图片描述信息
    let index = 1 //图片的索引，后期根据索引生成路径

    // 开启定时器
    setInterval(function () {
      // 让索引自增
      index++
      //判断索引的边界，如果索引到10，那么应该重置索引到1
      if (index == 10) {
        index = 1
      }
      // 根据索引生成一个图片路径
      let path = `./images/b0${index}.jpg`
      // 将生成的路径值给img的scr属性
      img.src = path
      // 设置图片的描述信息
      p.innerText = `第${index}张图片`
    }, 2000)
  </script>
</body>