当前页面还有极大优化空间，奈何本人能力及时间有限，望各位大佬轻喷，当然能指点一下还是很乐意接受的
css代码
<style>html,body {font-size: 10px;max-width: 1000px;height: 100%;margin: 0;padding: 0;min-width: 300px;background-color: #EEEEEE;}input {width: 100%;height: 4rem;box-sizing: border-box;margin-bottom: 30px;padding: 5px 10px;border-radius: 20px;border: 1px solid #eee;outline: none;}#login_box {font-size: 1.4rem;width: 100%;height: 100%;display: flex;align-items: center;}.back_box {width: 60%;margin: 0 auto;display: flex;flex-flow: column;text-align: center;line-height: 4rem;}.logo_img {width: 6rem;height: 6rem;border-radius: 50%;object-fit: cover;margin-bottom: 3rem;}/* 手机号登录 */.code_box {position: relative;}.get_code_btn {width: auto;position: absolute;right: 1rem;top: 0;}/* 账号登录 */.acc_login_box {display: none;flex-flow: column;}.login_btn {width: 100%;height: 4rem;font-size: 18px;font-weight: bold;color: #fff;cursor: pointer;background: rgba(0, 0, 0, 0.7);}/* 无背景按钮 */.blank_btn {background: none;border: none;cursor: pointer;}/* 消息弹窗 */#message_box {display: none;width: 100%;padding: 8px;text-align: center;position: absolute;z-index: 1000;top: 0;background: #faa;border-radius: 5px;box-sizing: border-box;}.message_content {margin: 0;color: #fff;}</style>
html代码
<body><div id="login_box"><div class="back_box"><div class="img_box"><img src="/favicon.ico" alt="" class="logo_img"></div><!-- 手机号登录 --><div class="phone_login_box"><div class="phone_box"><input type="phone" class="form_phone" maxlength="11" placeholder="手机号"></div><div class="code_box"><input type="text" class="form_code" placeholder="验证码" maxlength="6"><input type="button" value="获取验证码" onclick="getCode(this)" class="get_code_btn blank_btn" /></div><input type="button" value="登录" class="login_btn" onclick="login('phone')"><div><button class="tab_btn blank_btn" onclick="changeLoginType('account')">账号密码</button></div></div><!-- 账号登录 --><div class="acc_login_box"><div class="account_box"><input type="text" maxlength="20" class="form_account" placeholder="账号"></div><div class="password_box"><input type="password" maxlength="20" class="form_password" placeholder="密码"></div><input type="button" value="登录" class="login_btn" onclick="login('account')"><div><button class="tab_btn blank_btn" onclick="changeLoginType('phone')">手机号登录</button></div></div></div><div id="message_box"><p class="message_content"></p></div></div></body>
js代码
<script type="text/javascript">let accLogin = document.querySelector(".acc_login_box");let phoneLogin = document.querySelector(".phone_login_box");// 切换登录方式const changeLoginType = (type) => {if (type == 'account') {accLogin.style.display = 'flex';phoneLogin.style.display = 'none';} else {accLogin.style.display = 'none';phoneLogin.style.display = 'block';}}// 获取验证码const getCode = (e) => {let num = 60;let timer = setInterval(() => {num--;e.value = num;e.disabled = true;e.style.cursor = 'no-drop';if (num <= 0) {clearInterval(timer);e.value = '获取验证码';e.disabled = false;e.style.cursor = 'pointer';}}, 1000)}// 登录const login = (type) => {if (type == 'phone') {let phoneNum = document.querySelector(".form_phone").value;let codeNum = document.querySelector(".form_code").value;let reg = new RegExp(/^(13|15|17|18)\d{9}$/);if (!reg.test(phoneNum)) {showMsg('手机号格式不正确')return false;}if (!codeNum) {showMsg('验证码不可为空')return false;}window.location.href = '?phone=' + phoneNum + '?code=' + codeNum;} else if (type == 'account') {let accNum = document.querySelector(".form_account").value;let pswNum = document.querySelector(".form_password").value;if (!accNum || !pswNum) {showMsg('账号密码不可为空')return false;}window.location.href = '?acc=' + accNum;}}// 展示错误信息const showMsg = (content) => {let msgBox = document.querySelector("#message_box");let msgInfo = document.querySelector(".message_content");msgInfo.innerHTML = content;msgBox.style.display = 'block';setTimeout(() => {msgBox.style.display = 'none';}, 1500)}</script>
