获取验证码

2021-09-14 12:02:48 阅读：156 来源： 互联网

标签：inputs width 验证码 value height 获取 btn

<!DOCTYPE html> <html lang="en">
<head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <style>         body {             padding: 100px;         }
        button {             width: 115px;             height: 30px;             font-size: 12px;         }
        input {             height: 22px;             outline: none;         }
        div {             width: 230px;             padding: 30px;         }
        p input {             float: right;         }
        #oin {             width: 100px;         }
        .login {             width: 230px;             height: 40px;             text-align: center;             line-height: 40px;             background: skyblue;             margin-top: 30px;             color: #fff;             font-size: 12px;             font-weight: 800;             border-radius: 10px;             outline: none;             border: 2px solid #ccc;         }     </style> </head>
<body>     <div>         <p><span>用户名:</span><input type="text" placeholder="请输入用户名"></p>         <p><span>手机号:</span><input type="tel"></p>         <input type="text" id="oin">         <button id="btn">发送验证码</button>         <button class="login" id="login">登录</button>     </div>     <script>         // 点击发送验证码按钮禁用 + 倒计时开始         var timeId = null;         btn.onclick = function () {             this.disabled = true;             this.innerHTML = '9s后重新获取'             timeId = setInterval(btnChange, 1000);         }
        // 自定义函数每隔1s就改变btn上的文字         var i = 9;         function btnChange() {             i--;             btn.innerHTML = `${i}s后重新获取`;             if (i == 0) {                 btn.disabled = false;                 btn.innerHTML = '重新发送验证码';                 // 清除定时器                 clearInterval(timeId);                 // 重置i                 i = 9;             }         }         // 再次点击发现从 9 => -1 => -2 => 需要重置i的值
        login.addEventListener('click', function () {             var inputs = document.querySelectorAll('input')             if (inputs[0].value == '' || inputs[1].value == '' || inputs[2].value == '') {                 alert('请输入数据')                 return             }             if (!/^\d{1,5}$/.test(inputs[0].value)) {                 alert('用户名不符合要求')                 return             }             if(!/^\d{11}$/.test(inputs[1].value)){                 alert('密码不符合要求')                 return             }             // url要拼接参数需要在url后面添加?, 多个参数之间用&分隔             location.href = `./02-index.html?name=${inputs[0].value}&phone=${inputs[1].value}&code=${inputs[2].value}`             // 02-index.html?name=12345&phone=12332112333&code=111         })     </script> </body>
</html>

标签：inputs,width,验证码,value,height,获取,btn
来源： https://www.cnblogs.com/magnum-2077/p/15266867.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

获取验证码