以下为登录和注册页面的图片
登录:
注册:
先介绍登录页面
以下为登录的html
<input id="username" type="text" placeholder="请输入用户名">
<input id="password" type="password" placeholder="请输入密码">
<br/>
<br/>
<input id="login" type="button" value="登录">
<input id="setInput" type="button" value="注册">
以下为登录的js
//获取页面中的元素
var username=document.getElementById("username");
var password=document.getElementById("password");
var login=document.getElementById("login");
var setInput=document.getElementById("setInput");
//给localStorage加载初始数据
localStorage.username+= "chenzhuozhu:czz970312;";
localStorage.username+="sjaodoa:fajsdlfja;";
//设置个函数判断localStorage中是否有对应的账号密码
function tuust(value) {
var dta=localStorage.username.split(";");
for (let i=0;i<dta.length;i++){
var arrPust=dta[i].split(":");
if (arrPust[0]==value){
if (arrPust[1]==password.value){
return true;
}
}
}
return false;
}
//给登录按钮添加个判断,先判断用户名和密码框为不为空,并且数据库中有没有对应的数值。
login.addEventListener("click",function () {
if (username.value==""||password.value==""){
alert("用户名和密码不能为空");
} else {
if (tuust(username.value)){
alert("登录成功");
username.value="";
password.value="";
} else {
alert("没有你的用户名或者密码错误,重新注册一个吧");
}
}
});
//跳转到注册界面
setInput.addEventListener("click",function () {
location.href="login.html";
})
以下为注册页面的html
<input id="username" type="text" placeholder="请输入用户名">
<input id="password" type="password" placeholder="请输入密码">
<input id="passwordTwo" type="password" placeholder="请再次输入密码">
<br/><br/>
<input id="setInput" type="button" value="注册">
以下为注册页面的js
//获取页面中的元素
var username=document.getElementById("username");
var password=document.getElementById("password");
var passwordTwo=document.getElementById("passwordTwo");
var setInput=document.getElementById("setInput");
//给注册按钮增加个点击事件,判断用户名和密码是否为空,密码和重复密码是否一致,注册成功跳转
setInput.addEventListener("click",function () {
if (username.value==""||password.value==""||passwordTwo.value==""){
alert("用户名以及密码不能为空");
}else if (password.value!=passwordTwo.value) {
alert("密码和重复密码不一致");
}else {
if (!tuust(username.value)){
localStorage.username+=username.value+":"+password.value+";";
location.href="enter.html";
alert("恭喜,注册成功");
} else {
alert("你输入的用户名已经被注册");
username.value="";
}
}
});
//创建一个方法,判断注册的用户名是否被注册
function tuust(value) {
var dta=localStorage.username.split(";");
for (let i=0;i<dta.length;i++){
var arrPust=dta[i].split(":");
if (arrPust[0]==value){
return true;
}
}
return false;
}