js实现登录注册功能

萝卜头不吃萝卜头

已于 2023-09-18 10:24:48 修改

阅读量7.7k

点赞数 1

文章标签： javascript 前端 css

于 2022-10-31 00:12:10 首次发布

本文链接：https://blog.csdn.net/SqlloveSyn/article/details/127607682

版权

话不多说，上代码。

登录功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>登陆</title>
		<style type="text/css">
			.deng {
				margin-left: 36%;
				margin-top: 200px;
			}
 
			div h3 {
				margin-left: 10%;
			}
 
			button {
				float: left;
				margin-top: -39px;
				margin-left: 215px;
			}
 
			#sub {
				float: left;
				margin-left: 280px;
				margin-top: -39px;
			}
		</style>
	</head>
	<body>
		<div class="deng">
			<h3>登录</h3>
			<p>账号：<input type="text" name="" id="zh" value=""></p>
			<p>密码：<input type="password" name="" id="mm" value=""></p>
			<button type="but()">登录</button>
			<input type="submit" id="sub" value="注册">
		</div>
 
		<script type="text/javascript">
			localStorage.setItem()
			let but = document.getElementsByTagName("button")[0];
			let data = localStorage.getItem('data') == null ? [] : JSON.parse(localStorage.getItem('data'));
			console.log(data);
			but.onclick = function() {
				let zh = document.getElementById("zh").value;
				let mm = document.getElementById("mm").value;
 
				if (zh == '' || mm == '') {
					alert("账号密码不能为空");
					return;
				}
 
				let state = -1;
				for (let i = 0; i < data.length; i++) {
					if (data[i].zhang == zh) {
						state = i;
					}
				}
				console.log(state);
				if (state < 0) {
					alert("账号不存在");
				} else {
					if (data[state].mima == mm) {
						alert("登录成功");
					} else {
						alert("密码错误");
					}
				}
			}
			sub.onclick();
		</script>
	</body>
</html>

注册功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			.zui {
				margin-left: 36%;
				margin-top: 200px;
			}
 
			.yi {
				margin-left: 10%;
			}
 
			.er {
				margin-left: 10%;
			}
 
			button {
				float: left;
				margin-top: -40px;
				margin-left: 330px;
			}
		</style>
	</head>
	<body>
		<div class="zui">
			<div class="yi">
				<p>注册账号：<input type="zhang" value=""></p>
			</div>
			<div class="er">
				<p>密码：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="mmss" value=""></p>
			</div>
			<button type="button" class="but">注册</button>
		</div>
		<script type="text/javascript">
			let zhs = document.getElementsByTagName('input')[0];
			let mms = document.getElementsByTagName('input')[1];
			let but = document.getElementsByTagName('button')[0];
			but.onclick = function() {
				let zhss = zhs.value;
				console.log(zhss);
				let mmss = mms.value;
				console.log(mmss);
				
				let data = localStorage.getItem("data") == null? [] : JSON.parse(localStorage.getItem("data"));
				
				if(data == null){
					data= new Array();
				}else{
					data = JSON.parse(localStorage.getItem("data"));
				}
				
				let obj = {
					zhang: zhss,
					mima: mmss
				}
				data.push( obj )
				let str = JSON.stringify(data);
				localStorage.setItem("data", str);
			}
			
		</script>
 
	</body>
</html>