改好了
<!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>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
width: 800px;
height: 800px;
border: 1px solid green;
margin: 200px auto;
padding: 300px;
display: flex;
justify-content: center;
overflow: hidden;
}
input {
outline: 0;
padding-left: 25px;
width: 300px;
height: 100%;
border: 0;
}
input::placeholder {
color: #eae;
}
.btn1 {
outline: 0;
height: 100%;
border: 0;
background-color: #fff;
width: 120px;
white-space: nowrap;
cursor: pointer;
}
.fa1 {
margin: 30px 0;
height: 30px;
width: 422px;
display: flex;
border: 1px solid pink;
}
</style>
</head>
<body>
<div class="box">
<div class="fa2"></div>
<div class="fa1">
<input
type="text"
placeholder="短信验证码"
class="info" />
<button class="btn1">获取验证码</button>
</div>
</div>
<script>
/* 小兔鲜页面注册 */
/* 需求1：发送验证码 用户点击之后，显示05秒后重新获取，时间到了，自动改为 重新获取 */
const info = document.querySelector('.info')
const btn1 = document.querySelector('.btn1')
infoTime()
function infoTime() {
let i = 5
btn1.addEventListener('click', () => {
btn1.disabled = true
info.placeholder = '已发送'
let num = setInterval(function () {
btn1.innerHTML = `0${i}秒后再重新获取`
i--
if (i === -1) {
clearInterval(num)
i = 5
btn1.innerHTML = '重新获取'
info.placeholder = '短信验证码'
btn1.disabled = false
}
}, 1000)
})
}
/* 需求2 用户名验证
2.1 封装函数 失去焦点触发函数
2.2 正则 /^[a-zA-Z0-9-_]{6,10}$/
2.3 不符合要求，则出现提示，并return false 中断程序 否则返回return true
之后返回布尔值，为最后提交按钮做准备
侦听使用change事件，当鼠标离开表单，且表单值发生变化时触发
*/
</script>
</body>
</html>
