注册界面
html部分
<h1>
注册
</h1>
<form>
<p>
<input name="uname" placeholder="用户名">
</p>
<p>
<input name="upwd" placeholder="密码">
</p>
<p>
<input name="utel" placeholder="手机号">
</p>
<p>
<button>注册</button> <button type="reset">重置</button>
</p>
</form>
<div class="msg" id="msg"></div>
<a href="./login.html">立即去登录</a>
CSS的部分
.msg {
height: 45px;
line-height: 45px;
text-align: center;
width: 500px;
border-radius: 5px;
background-color: khaki;
color: red;
}
JS的部分
var oForm=document.forms[0];
var oMsg=document.querySelector("#msg");
//
function validate(reg,val,msg){
var oMsg=document.querySelector("#msg");
var flag=reg.test(val);
oMsg.innerHTML=flag?"":msg;
return flag;
}
var userFlag=false,pwdFlag=false,telFlag=false;
oForm.uname.oninput=function(){
var msg="用户名只包含数字,字母,下划线, 且长度不小于6位";
userFlag=validate(/^\w{6,}/,this.value.trim(),msg);//调用新函数
}
oForm.upwd.oninput=function(){
var msg="密码长度在8到16位";
pwdFlag=validate(/^.{8,16}$/,this.value.trim(),msg);
}
oForm.utel.oninput=function(){
var msg="手机号要合法";
telFlag=validate(/^[1][3-9]\d{9}$/,this.value.trim(),msg);
}
//表单提交事件
oForm.onsubmit=function(){
if(!(userFlag&&pwdFlag&&telFlag)){
return false;
}
//1. 把当前的输入框的内容,做成一个对象
var oUser={
name:this.uname.value,
pwd:this.upwd.value,
tel:this.utel.value,
time:Date.now(),
status:1
}
//2.
var oUserList=JSON.parse(localStorage.getItem("users")||"[]");
//3.
var isReg=oUserList.some(function(item){
return item.name==oUser.name;
//some遍历,任意条件满足返回true
})
if(isReg){
oMsg.innerHTML="该用户已经注册!"
userFlag=false;
return false
}
oUserList.push(oUser);
localStorage.setItem("users",JSON.stringify(oUserList));
alert("注册成功!");
oMsg.innerHTML="";
return false;
}
登录界面
html部分
css部分
<h1>登录</h1>
<form>
<p>
<input name="uname" placeholder="用户名">
</p>
<p>
<input name="upwd" placeholder="密码">
</p>
<p>
<button>登录</button>
<button type="reset">重置</button>
</p>
</form>
JS部分
var oForm = document.querySelector("form");
oForm.onsubmit = function () {
var oUser = {
name: this.uname.value,
pwd: this.upwd.value
}
var oUserList = JSON.parse(localStorage.getItem("users") || "[]");
var isLogin = oUserList.some(function (item) {
return item.name === oUser.name && item.pwd === oUser.pwd && item.status == 1;
})
if (isLogin) {
//把当前的用户名 存储到本地,一会在index.html 获取到当前登录人
//并显示欢迎 xxx 回来 休闲快乐会所
// sessionStorage 关闭页面就会销毁
sessionStorage.setItem("currentUser", oUser.name);
alert("登录成功!");
location.replace("./index.html");
}else{
alert("用户名或者密码错误!")
}
return false;
}
后台管理界面
HTML部分
<div id="msg">
欢迎尊敬: <span id="user"></span> VIP中P会员..回到休闲娱乐会所! ^_^;
<a href="javascript:void(0)">下次再来消费</a>
</div>
<form>
<input name="uname"> <button type="button" id="search">搜索</button>
</form>
<table>
<thead>
<tr>
<th>用户名</th>
<th>密码</th>
<th>手机号</th>
<th>注册日期</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tab">
</tbody>
</table>
CSS部分
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<style>
tr,
td,
th {
border: 1px solid #000;
}
table {
width: 600px;
border: 1px solid #000;
border-spacing: 0px;
border-collapse: collapse;
text-align: center;
}
</style>
JS部分
//获得表格
var oTab=document.querySelector("#tab");
//获取本地数据
var oUserData=JSON.parse(localStorage.getItem("users")||"[]");
var strHtml="";
oUserData.forEach(function(item){
strHtml+=`
<tr>
<td>${item.name}</td>
<td>${item.pwd}</td>
<td>${item.tel}</td>
<td>${moment(item.time).format("YYYY-MM-DD HH:mm:ss")}</td>
<td>${item.status==1?"<font class='green'>可用</font>":"<font class='red'>不可用</font>"}</td>
<td>
<a class="disb" href="javascript:void(0);" data-name=${item.name}>
${item.status==1?"禁用":"启用"}
</a>
</td>
</tr>
`
oTab.innerHTML=strHtml;
})
//禁用操作
oTab.addEventListener("click",function(evt){
var e=evt||window.event;
var ele=e.target||e.srcElement;
if(!(ele.nodeName=="A"&&ele.className=="disb")){
return;
}
var strName=ele.getAttribute("data-name");
var status=0;
//获取本地数据
oUserData.forEach(function(item){
if(item.name==strName){
item.status=!item.status;//自己的状态取反
status=item.status;
}
})
//修改显示的文字
ele.parentNode.parentNode.children[4].innerHTML=status==1?"<font color='green'>可用</font>":"<font color='red'>禁用</font>"
//把内存的数据,覆盖本地存储的数据
localStorage.setItem("users",JSON.stringify(oUserData))
})
//实现搜索
var oBtn=document.querySelector("#search");
oBtn.onclick=function(){
var strName=document.querySelector("input[name='uname']").value;
var newData=oUserData.filter(function(item){
return item.name.indexOf(strName)!=-1;
//模糊搜索,只要有满足条件的都返回
//filter返回一个满足条件的新数组
})
//利用新数组进行覆盖操作显示,但不能写入localStorage的本的磁盘中去
var strHtml=``;
newData.forEach(function(item){
strHtml+=`
<tr>
<td>${item.name}</td>
<td>${item.pwd}</td>
<td>${item.tel}</td>
<td>${moment(item.time).format("YYYY-MM-DD HH:mm:ss")}</td>
<td>${item.status==1?"<font class='green'>可用</font>":"<font class='red'>不可用</font>"}</td>
<td>
<a class="disb" href="javascript:void(0);" data-name=${item.name}>
${item.status==1?"禁用":"启用"}
</a>
</td>
</tr>
`
oTab.innerHTML=strHtml;
})
}
//1.获取当前的登录信息,如果有登录信息,就显示所有的用户
//如果没有,就自动跳转到登录页面
if(sessionStorage.getItem("currentUser")==null){
location.href="./login.html";//去登录
}else{
var user=document.querySelector("#user");
user.innerHTML=localStorage.getItem("currentUser")
}
var oA=document.querySelector("a");
oA.onclick=function(){
sessionStorage.removeItem("currentUser");
location="./login.html";
}
