获取手机验证码案例 

<!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>短信验证码</title>

    <style>

​    * {

​      margin: 0;

​      padding: 0; 

​    }

​    .container {

​      width: 300px;

​      margin: 0 auto;



​    }

​    .input--boder-bottom {

​      border-bottom: 1px solid #ccc;

​      padding: 10px 0;

​      display: flex;

​    }

​    .input--boder-bottom input {

​      outline: none;

​      -webkit-appearance: button;

​      -webkit-appearance: none;

​      border-radius: 0;

​      border: none;

​      flex: 1;

​    }

​    .input--boder-bottom button {

​      background: #FF8040;

​      color: #fff;

​      padding: 6px 7px;

​      border-radius: 7px;

​      outline: none;

​      -webkit-appearance: button;

​      -webkit-appearance: none;

​      border: none;

​    }

​    .btn {

​      padding: 15px 0;

​      display: flex;

​      justify-content: center;

​    }

​    .btn button {

​      width: 230px;

​      height: 40px;

​      background: pink;

​      border-radius: 10px;

​      border: none;

​      outline: none;

​      font-size: 18px;

​    }

​    .form-radio {

​      display: flex;

​      justify-content: center;

​      align-items: center;

​    }

​    .tel-error {

​      color: red;

​      display: none;

​    }

  </style>

</head>

<body>

    <div class="container">

    <div class="input--boder-bottom">

​    <input type="" name="" placeholder="请输入手机号" id="tel">

  </div>

    <div class="input--boder-bottom">

​    <input type="" name="" placeholder="请输入验证码">

​    <button id="ver">获取验证码</button>

  </div>

    <div class="tel-error" id="telError">您的输入有误</div>

    <div class="btn">

​    <button>确定</button>

  </div>

    <div class="form-radio">

​    <input type="radio" name="">

​    <span>已阅读并同意<a href='javascript:;'>《服务注册条款》</a></span>

  </div>

</div>

</body>

<script>

  //0.点击获取验证码才判断手机号是否符合要求

  //1. 判断手机号是否符合要求

  // false 输入有误

  // true  2

  // 2.发送验证码倒计时

  //橙色背景，白色文字 60秒倒计时

  var ver = document.getElementById("ver");

  var tel = document.getElementById("tel");

  var telError = document.getElementById("telError");

  var reg = /^1[3456789]\d{9}$/;

  var num = 5;

  ver.onclick = function(){

​    if(reg.test(tel.value)){

​      telError.style.display = 'none';

​      ver.style.background = '#999999';

​      ver.style.color = '#fff';

​      settime(ver);

​    }else {

​      telError.style.display = 'block';

​    }

  }

  function settime(el){

​    if(num == 0){

​      el.removeAttribute("disable");

​      el.innerHTML = '获取验证码';

​      el.style.background = '#FF8040';

​      el.style.color = '#fff';

​      num=5;

​      return;

​    }else {

​      el.innerHTML = num + "秒后再获取";

​      el.setAttribute("disable",true);

​      num--;

​    }

​    setTimeout(function(){

​        settime(el);

​      },1000);

  }

</script>

</html>
posted @ 2021-09-08 21:39  正在努力的澎澎  阅读(222)  评论(0)    收藏  举报