炫酷的登录注册界面本地存储数据【HTML+CSS+JS】实现

cx冯
421 阅读3分钟

前言

功能分析：

        1.登录界面

        2.注册界面

        3.数据存储

        4.登录一次下次打开就免登录

        5.限制用户免登录次数就登录一次

效果图如下：

ab940b431be3426889afefb0b8503241.png

文件结构目录

image.png

HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<!-- <script src="https://code.jquery.com/jquery-3.6.3.slim.min.js"></script> 这一段引用必须要加在这里不然js代码就无效 -->
		<script src="https://code.jquery.com/jquery-3.6.3.slim.min.js"></script>
		<link rel="stylesheet" href="./css/index.css">
		<script src="./js/index.js"></script>
	</head>
	<body>
		<!-- 用户登录界面 -->
		<div class="login">
			<h2>用户登录</h2>
			<div class="login_box">
				<input type="text" id='name' maxlength='20'/>
				<label for="name">账号</label>
			</div>
			<div class="login_box">
				<input type="password" id='pwd' maxlength='20'>
				<label for="pwd">密码</label>
			</div>
			<a class="login-a">登录<span></span><span></span><span></span><span></span></a>
			<a class="enroll-a">注册<span></span><span></span><span></span><span></span></a>
		</div>
 
		<!-- 用户注册界面 -->
		<div class="login enroll" style="display: none;">
			<h2>用户注册</h2>
			<div class="login_box">
				<input type="text" id="name1" maxlength='20'/>
				<label for="name">注册账号</label>
			</div>
			<div class="login_box">
				<input type="password" id="pwd1" maxlength='20'>
				<label for="pwd">注册密码</label>
			</div>
			<a class="login-b">登录<span></span><span></span><span></span><span></span></a>
			<a class="enroll-b">注册<span></span><span></span><span></span><span></span></a>
		</div>
	</body>
</html>

CSS代码

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
 
body {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background: linear-gradient(#141e30, #243b55);
}
 
.login {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 400px;
	padding: 40px;
	background-color: rgba(0, 0, 0, 0.2);
	box-shadow: 0 15px 25px rgba(0, 0, 0, 0.4);
}
 
.login h2 {
	color: #fff;
	margin-bottom: 30px;
}
 
.login .login_box {
	position: relative;
	width: 100%;
}
 
.login .login_box input {
	outline: none;
	border: none;
	width: 100%;
	padding: 10px 0;
	margin-bottom: 30px;
	color: #fff;
	font-size: 16px;
	border-bottom: 1px solid #fff;
	background-color: transparent;
}
 
.login .login_box label {
	position: absolute;
	top: 0;
	left: 0;
	padding: 10px 0;
	color: #fff;
	pointer-events: none;
	transition: all 0.5s;
}
 
.login .login_box input:focus+label,
.login .login_box input:valid+label {
	top: -20px;
	color: #03e9f4;
	font-size: 12px;
}
 
.login a {
	position: relative;
	padding: 10px 20px;
	color: #03e9f4;
	text-decoration: none;
	transition: all 0.5s;
}
 
.login a:hover {
	color: #fff;
	border-radius: 5px;
	background-color: #03e9f4;
	box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 100px #03e9f4;
}
 
.login a span {
	position: absolute;
}
 
.login a span:first-child {
	top: 0;
	left: -100%;
	width: 100%;
	height: 2px;
	background: linear-gradient(to right, transparent, #03e9f4);
	animation: move1 1s linear infinite;
}
 
.login a span:nth-child(2) {
	right: 0;
	top: -100%;
	width: 2px;
	height: 100%;
	background: linear-gradient(transparent, #03e6f4);
	animation: move2 1s linear 0.25s infinite;
}
 
.login a span:nth-child(3) {
	right: -100%;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(to left, transparent, #03e9f4);
	animation: move3 1s linear 0.5s infinite;
}
 
.login a span:last-child {
	left: 0;
	bottom: -100%;
	width: 2px;
	height: 100%;
	background: linear-gradient(#03e9f4, transparent);
	animation: move4 1s linear 0.75s infinite;
}
 
.login-a {
	position: absolute;
	left: 90px;
	bottom: 0px;
	cursor: pointer;
}
 
.enroll-a {
	position: absolute;
	left: -110px;
	bottom: 40px;
	cursor: pointer;
}
 
.login-b {
	position: absolute;
	left: -110px;
	bottom: 0px;
	cursor: pointer;
}
 
.enroll-b {
	position: absolute;
	left: 90px;
	bottom: 40px;
	cursor: pointer;
}
 
@keyframes move1 {
	0% {
		left: -100%;
	}
 
	50%,
	100% {
		left: 100%;
	}
}
 
@keyframes move2 {
	0% {
		top: -100%;
	}
 
	50%,
	100% {
		top: 100%;
	}
}
 
@keyframes move3 {
	0% {
		right: -100%;
	}
 
	50%,
	100% {
		right: 100%;
	}
}
 
@keyframes move4 {
	0% {
		bottom: -100%;
	}
 
	50%,
	100% {
		bottom: 100%;
	}
}
 
iframe {
	width: 100%;
	height: 100%;
	border: 0px;
	background-color: white;
}

JavaScript代码

$(() => {
	// 登录注册界面切换
	$('.enroll-a').click(() => {
		$('.login').hide();
		$('.enroll').show();
	})
	$('.login-b').click(() => {handoff()})
	const handoff = () => {
		$('.login').show();
		$('.enroll').hide();
	}
 
	// 判断登录账号与密码是否正确
	$('.login-a').click(() => {
		const name = $('#name').val();
		const pwd = $('#pwd').val();
		let account = localStorage.getItem('account');
		let password = localStorage.getItem('password');
		if (!name || !pwd) {
			alert('账号或密码不能为空！！！');
		} else if (name == account && pwd == password || name == 666 && pwd == 888) { // 666与888是默认登录账号与密码（可修改或删除）
			alert('登录成功！');
			localStorage.setItem('captcha', 1);
			$('.login').hide();
			// indexbox.html 是登录成功后显示的页面路径（可修改）
			$('body').append('<iframe src="indexbox.html"></iframe>');
		} else {
			alert('账号或密码错误！！！');
		}
	})
 
	// 注册并本地储存账号与密码数据
	$('.enroll-b').click(() => {
		const name1 = $('#name1').val();
		const pwd1 = $('#pwd1').val();
		if (!name1 || !pwd1) {
			alert('账号与密码不能为空！！！');
		} else {
			localStorage.setItem('account', name1);
			localStorage.setItem('password', pwd1);
			alert('注册成功！');
			handoff();
			$('#name').val(name1);
			$('#pwd').val(pwd1);
		}
	})
	
	// 判断以前是否登录过，如果是就免登录( 20 表示用户免登录20次就要登录一次 （可修改）)
	const detect = () => {
		if (localStorage.getItem('captcha').length <= 20) {
			const recording = localStorage.getItem('captcha') + 1;
			localStorage.setItem('captcha', recording);
			$('.login').hide();
			// indexbox.html 是登录成功后显示的页面路径（可修改）
			$('body').append('<iframe src="indexbox.html"></iframe>');
		}
	}
	detect();
})

总结

如果嫌麻烦有已经打包好的项目，下载解压即可使用。

蓝奏：wwwz.lanzout.com/ikS7u0sk9sx…

密码：b7b2

如有不懂的代码，可在评论区留言或私信

作者看到会帮你一一解答

谢谢大家的支持，您的一建三连是作者前进的最大动力！！！

2023-4-10

avatar
文章
阅读
粉丝