html+js+css实现登录页面_htmlcssjs登录页面代码-CSDN博客

本文链接：https://blog.csdn.net/long321041080/article/details/122346214

当前页面还有极大优化空间，奈何本人能力及时间有限，望各位大佬轻喷，当然能指点一下还是很乐意接受的

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="http://pms.ddkjhl.com/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 = 'https://www.baidu.com?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 = 'https://www.baidu.com?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>