<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>