JS的点击获取验证码案例点击获取验证码 <!DOCTYPE html> <html lang="en"> <head>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button>点击获取验证码</button>
  <script>
    /**
     * 功能：
     *    点击一下按钮，让按钮变成X秒后可以重新执行，并且在5秒内不能重新执行
     *    点击一下按钮，按钮变成5秒后可以重新执行，在着5秒内点击这个按钮，不能重复触发
     * */ 
    // 0.获取元素
    var btn = document.querySelector('button')

    // 0.准备变量
    var flag = true
    // 1.给元素添加点击事件
    btn.onclick = function () {
      if(flag === false) return

      console.log('当前点击事件执行')
      var count = 5
      btn.innerText = `${count} 秒后可以重新执行`

      flag = false

      var timeId = setInterval(function() {
        count--
        btn.innerText = `${count} 秒后可以重新执行`

        if(count === 0) {
          btn.innerText = '点击获取验证码'
          clearInterval(timeId)
          flag = true
        }
      }, 1000)
    }

    /**
     * *第一次点击按钮时
     *        flag === true，所以24行 if判断不可能会执行，函数会正常往下执行
     *          执行到 30行的时候，会将变量flag赋值为 false;然后再5秒钟以后重新赋值为 true
     * 
     * 第二次点击按钮时(与第一次点击完成时间间隔只有3秒钟)
     *        flag = false，所以24行 if判晰条件成立，执行代码return，所以函数就此中断
     * 
     * 第三次点击按钮时(与第一次点击完成时间间隔有30秒钟)
     *        flag = true，所以24行 if判断不可能会执行，函数会正常往下执行
     *          执行到30行的时候,会将变量flag赋值为false;
     *                然后5秒钟以后重新赋值为true
     * */ 
  </script>
</body>
</html>