实现短信60倒计时 +电话号码验证

最新推荐文章于 2024-01-25 14:32:49 发布

疯人院里的疯言风语

最新推荐文章于 2024-01-25 14:32:49 发布

阅读量133

点赞数 1

本文链接：https://blog.csdn.net/m0_59769246/article/details/121383774

版权

<!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>js操作DOM完成短信验证</title>
  <script>
    function threeFn() {
      const verify = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-7|9])|(?:5[0-3|5-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1|8|9]))\d{8}$/
      const Value = document.getElementById('value').value;
      let myElement = document.getElementById("sbt");
      if (Value === "") {
        alert("请输入电话");
      } else {
        if (verify.test(Value)) {
          const TIME_COUNT = 61
          myElement.setAttribute("disabled", true);
          myElement.style.backgroundColor = '#c3c3c3';
          let Obtain = '', timer = null;
          if (!timer) {
            Obtain = TIME_COUNT
            console.log("在此处请求接口即可");
            timer = setInterval(() => {
              if (Obtain > 0 && Obtain <= TIME_COUNT) {
                Obtain--
                myElement.textContent = `${Obtain}秒后再试`
              } else {
                clearInterval(timer)
                timer = null
                myElement.removeAttribute("disabled");
                myElement.style.backgroundColor = 'blueviolet';
                myElement.textContent = `获取`
              }
            }, 1000)
          }
        } else {
          alert("请输入正确的电话");
        }
      }

    }
  </script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 310px;
      height: 400px;
      line-height: 400px;
      margin: 0 auto;
    }

    #value {
      width: 170px;
      height: 25px;
      outline: none;
      border-radius: 6px;
      border: none;
      background: #f5f6f7;
      padding-left: 10px;
      border: 1px solid rgba(0, 0, 0, .06);
    }

    #sbt {
      padding: 5px 20px;
      outline: none;
      border: none;
      border-radius: 3px;
      background: blueviolet;
      color: #fff;
      cursor: pointer;
      letter-spacing: 2px;
    }
  </style>
</head>

<body>
  <div class="box">
    <input id="value" placeholder="请输入" type="text">
    <button id="sbt" onclick="threeFn()">获取</button>
  </div>

</body>

</html>