本文是基于https://blog.csdn.net/NpcCat/article/details/106434653?spm=1001.2014.3001.5501的基础上的优化
有私信希望我做登录的用户名密码验证和登录后的页面跳转，这里用JS简单实现一下
还有很多额外的可以做的优化如输入信息格式的验证、查询用户名是否重复等都可以在取到用户输入的信息后通过一些简单的方法实现，百度上的大佬们也很多方法，这里就不进一步细化了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>login</title>
<link rel="stylesheet" type="text/css" href="pageChange.css" />
<script src="pageChange.js"></script>
<script src="Click.js"></script>
</head>
<body>
<div class="control">
<div class="item">
<div class="active">登录</div><div>注册</div>
</div>
<div class="content">
<div style="display: block;">
<p>账号</p>
<input type="text" placeholder="username" id="login-username"/>
<p>密码</p>
<input type="password" placeholder="password" id="login-password"/>
<br/>
<input type="submit" value="登录" onclick="login()"/>
</div>
<div>
<p>用户名</p>
<input type="text" placeholder="username" id="register-username"/>
<p>密码</p>
<input type="password" placeholder="password" id="register-password"/>
<p>邮箱</p>
<input type="text" placeholder="email" id="register-email"/>
<br/>
<input type="submit" value="登录" onclick="register()"/>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>login Success</h1>
</body>
</html>
*{
margin: 0;
padding: 0;
}
body{
background: #f3f3f3;
}
.control{
width: 340px;
background: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border-radius: 5px;
}
.item{
width: 340px;
height: 60px;
background: #eeeeee;
}
.item div{
width: 170px;
height: 60px;
display: inline-block;
color: black;
font-size: 18px;
text-align: center;
line-height: 60px;
cursor: pointer;
}
.content{
width: 100%;
}
.content div{
margin: 20px 30px;
display: none;
text-align: left;
}
p{
color: #4a4a4a;
margin-top: 30px;
margin-bottom: 6px;
font-size: 15px;
}
.content input[type="text"], .content input[type="password"]{
width: 100%;
height: 40px;
border-radius: 3px;
border: 1px solid #adadad;
padding: 0 10px;
box-sizing: border-box;
}
.content input[type="submit"]{
margin-top: 40px;
width: 100%;
height: 40px;
border-radius: 5px;
color: white;
border: 1px solid #adadad;
background: #00dd60;
cursor: pointer;
letter-spacing: 4px;
margin-bottom: 40px;
}
.active{
background: white;
}
.item div:hover{
background: #f6f6f6;
}
window.onload = function(){
var item = document.getElementsByClassName("item");
var it = item[0].getElementsByTagName("div");
var content = document.getElementsByClassName("content");
var con = content[0].getElementsByTagName("div");
for(let i=0;i<it.length;i++){
it[i].onclick = function(){
for(let j=0;j<it.length;j++){
it[j].className = '';
con[j].style.display = "none";
}
this.className = "active";
it[i].index=i;
con[i].style.display = "block";
}
}
}
var user = new Map([["123","123"]])
function login(){
var username = document.getElementById("login-username").value;
var password = document.getElementById("login-password").value;
if(user.get(username)==password){
window.location.href="loginSuccess.html";
}else{
alert("用户名或密码错误");
}
}
function register(){
var username = document.getElementById("register-username").value;
var password = document.getElementById("register-password").value;
user.set(username,password);
alert("注册成功，请登录");
document.getElementById("register-username").value="";
document.getElementById("register-password").value="";
document.getElementById("register-email").value="";
}