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