一.index.html
<style>
div{width:100%;height:100%;background:rgba(0,0,0,.6);z-index: 200px;position: fixed;left: 0;top: 0;display: none;}
</style>
</head>
<body>
<h1>当前是首页面</h1>
<button name="reg">注册页面</button><br>
<button name="login">登录页面</button><br>
<button name="back">退出登录</button><br>
<button name="show">购物车</button><br>
<div>
账号:<input type="text" placeholder="请输入账号"><br>
密码:<input type="password" placeholder="请输入密码"><br>
<button name="login2">登录</button>
</div>
<!-- js -->
<script src="./utils.js"></script>
<script>
//获取标签对象
const oReg=document.querySelector('[name="reg"]');
const oLogin=document.querySelector('[name="login"]');
const oBack=document.querySelector('[name="back"]');
const oShow=document.querySelector('[name="show"]');
const oDiv=document.querySelector('div');
const oLogin2=document.querySelector('[name="login2"]');
//注册
oReg.addEventListener('click',()=>{
window.location.href='./reg.html';
});
//登录
oLogin.addEventListener('click',()=>{
oDiv.style.display='block';
});
oLogin2.addEventListener('click',()=>{
let username=document.querySelectorAll('input')[0].value;
let userpwd=document.querySelectorAll('input')[1].value;
postAjaxSend('./login.php',fun,`username=${username}&userpwd=${userpwd}`);
function fun(str){
if(str == '1'){
window.alert('您登录成功');
mySetCookie('login','1',7*24*60*60);
oDiv.style.display='none';
}else{
let bool=window.confirm('您登录失败,是否重新登录');
if(bool==true){
oDiv.style.display='block';
}
}
}
if(username==''){
window.alert('账号不能为空');
return;
}
if(userpwd==''){
window.alert('密码不能为空');
return;
}
});
//退出
oBack.addEventListener('click',()=>{
mySetCookie('login','1',-1);
window.alert('您已退出登录');
});
//购物
oShow.addEventListener('click',()=>{
const cookieObj=myGetCookie(document.cookie);
if(cookieObj.login=='1'){
window.location.href='./shop.html';
}else{
let bool=window.confirm('您还没有登录,是否登录');
if(bool==true){
oDiv.style.display='block';
}
}
});
</script>
</body>
二.login.php
<?php
$loginName=$_POST['username'];
$loginPwd=$_POST['userpwd'];
$link=mysqli_connect('localhost','root','root','nz2002',3306);
$sql="SELECT * FROM `user` WHERE `username`='{$loginName}' AND `userpwd`='{$loginPwd}' ";
$result=mysqli_query($link,$sql);
$arr=mysqli_fetch_all($result,MYSQLI_ASSOC);
if(count($arr)==0){
echo 0;
}else{
echo 1;
}
mysqli_close($link);
三.reg.html
<body>
<!--html 注册信息 -->
账号:<input type="text" name="userN" placeholder="请您输入8-16位的账号"><span name="userName"></span><br>
密码:<input type="password" name="userP1" placeholder="请您输入8-16位的密码"><br>
重复密码:<input type="password" name="userP2" placeholder="二次输入密码,与密码一致"><br>
验证码:<input type="text" name="vc1" placeholder="请您输入验证码"><br>
<span name="vc2"></span><button type="button" name="reset">看不清 刷新</button><br>
<button name="reg">提交</button>
<div name="msg"></div>
<!-- JS 注册信息 -->
<script src="utils.js"></script>
<script>
//账号
const oUserN=document.querySelector('[name="userN"]');
const oUserName=document.querySelector('[name="userName"]');
oUserN.addEventListener('focus',()=>{
oUserName.innerHTML='账号不能为空,请您输入8-16位的账号';
oUserName.style.color="black";
});
oUserN.addEventListener('input',()=>{
let oUserNVal=oUserN.value;
oUserName.innerHTML=`您已输入${oUserNVal.length}位字符,最少还需输入${8-oUserNVal.length}`;
if(8-oUserNVal.length<=0){
oUserName.innerHTML='';
}
oUserName.style.color="black";
});
oUserN.addEventListener('change',()=>{
let oUserNVal=oUserN.value;
if(oUserNVal.length<8 || oUserNVal.length>16){
oUserName.innerHTML='您输入的账号不符合规范';
oUserName.style.color='red';
}else{
oUserName.innerHTML='您输入的账号符合规范';
oUserName.style.color='black';
}
});
//验证码
let str='1234567890qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM';
function vCode(str){
let vcStr='';
for(let i=1;i<6;i++){
let num=parseInt(Math.random()*str.length);
if(vcStr.indexOf(str[num])==-1){
vcStr+=str[num];
}
}
return vcStr;
}
const oVc1=document.querySelector('[name="vc1"]');
const oVc2=document.querySelector('[name="vc2"]');
oVc2.innerHTML=vCode(str);
const oReset=document.querySelector('[name="reset"]');
oReset.addEventListener('click',()=>{
oVc2.innerHTML=vCode(str);
});
const oUserP1=document.querySelector('[name="userP1"]');
const oUserP2=document.querySelector('[name="userP2"]');
//注册
const oReg=document.querySelector('[name="reg"]');
oReg.addEventListener('click',()=>{
let oUserNVal=oUserN.value;
let oUserP1Val=oUserP1.value;
let oUserP2Val=oUserP2.value;
let oVc1Val=oVc1.value;
let oVc2Val=oVc2.innerHTML;
if(oUserNVal==''){
window.alert('账号不能为空');
return;
}
if(oUserNVal.length<8 || oUserNVal.length>16){
window.alert('账号不符合规范');
return;
}
if(oUserP1Val==''){
window.alert('密码不能为空');
return;
}
if(oUserP1Val.length<8 || oUserP2Val.length>16){
window.alert('密码不符合规范');
return;
}
if(oUserP2Val==''){
window.alert('重复密码不能为空');
return;
}
if(oUserP1Val !== oUserP2Val){
window.alert('两次输入的密码不一致');
return;
}
if(oVc1Val==''){
window.alert('验证码不能为空');
return;
}
if(oVc1Val.toLowerCase() != oVc2Val.toLowerCase()){
window.alert('您的验证码输入不正确');
return;
}
postAjaxSend('./reg.php',fun,`regname=${oUserNVal}®pwd=${oUserP1Val}`);
});
function fun(str){
const oDiv=document.querySelector('[name="msg"]');
if(str == '1'){
oDiv.innerHTML='注册成功,5秒后跳转至首页';
let int=5;
setInterval(()=>{
oDiv.innerHTML=`注册成功,${int}后将进入首页`;
int--;
if(int==0){
window.location.href='./index.html';
}
},1000);
}else{
oDiv.innerHTML='<span style="color:red">注册失败,您的用户名已被占用,请您重新设置</span>';
}
}
</script>
</body>
四.reg.php
<?php
$regName=$_POST['regname'];
$regPwd=$_POST['regpwd'];
$link=mysqli_connect('localhost','root','root','nz2002',3306);
$sql="INSERT INTO `user` (`username`,`userpwd`) VALUES ('{$regName}','{$regPwd}') ";
$result=mysqli_query($link,$sql);
if($result==true){
echo 1;
}else{
echo 0;
}
mysqli_close($link);
五.shop.html
<body>
<h1>我是购物车</h1>
</body>
六.utils.js
function mySetCookie(key,value,time){
const nowTime=new Date();
let t=nowTime.getTime()-(8*60*60*1000)+(time*1000);
nowTime.setTime(t);
document.cookie=`${key}=${value};expires=${time == undefined ? '' : nowTime}`;
}
function myGetCookie(cookieStr){
const arr=cookieStr.split('; ');
const obj={};
arr.forEach((val)=>{
const nowArr=val.split('=');
obj[nowArr[0]]=nowArr[1];
});
return obj;
}
function getAjaxSend(urlStr,cb){
const xhr=new XMLHttpRequest();
xhr.open('get',urlStr);
xhr.send();
xhr.onload=function(){
cb(xhr.response);
}
}
function postAjaxSend(url,func,dataStr){
const xhr=new XMLHttpRequest();
xhr.open('post',url);
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
xhr.send(dataStr);
xhr.onload=function(){
func(xhr.response);
}
}