一:源码获取
二:页面展示





















三:部分代码演示
document.addEventListener('DOMContentLoaded',function(){
user=window.localStorage.getItem('user');
user=JSON.parse(user)
var admin1=document.querySelector('.login-num');
var pwd1=document.querySelector('.login-pwd');
var login_btn=document.querySelector('.login-button');
var flag3=4;
login_btn.addEventListener('dblclick',function(event){
var flag1;
var flag2;
for( i=0;i<user.length;i++){
if(admin1.value!=user[i].admin){
flag1=false;
} else if(admin1.value==user[i].admin){
flag1=true;
for( var j=0;j<user.length;j++){
if(pwd1.value!=user[i].pwd){
flag2=false;
} else if(pwd1.value==user[i].pwd){
flag2=true;
if(flag2==true){
break;
}
}
}
break;
}
}if(admin1.value==''&&pwd1.value==''){
alert('请输入您的账号')
}else if(admin1.value==''&&pwd1.value!=''){
alert('不输入账号,谁知道密码对不对呢?')
}else if(flag1==false){
alert('您输入的账户不存在,检查是否输错或去注册账户!')
}else if(flag1==true&&pwd1.value==''){
alert('密码不能为空')
}
else if(flag1==true&&flag2==false){
flag3--;
if(flag3==0){
login_btn.className='current1'
login_btn.value='还剩下1000秒后解除冻结';
login_btn.disabled=true;
pwd1.value=''
alert('错误次数过多,您的账户被冻结');
var times=1000;
var timer=window.setInterval(function(){
if(times==0){
window.clearInterval(timer);
login_btn.disabled=false;
login_btn.className='login-button'
login_btn.value='登录';
flag3=4;
}else{
times--;
login_btn.value='还剩下'+times+'秒后解除冻结';
}
},1000)
console.log(11);
}else{
alert('密码错误,您还剩下'+ flag3 +'次机会')
}
}
else if(flag1==true&&flag2==true){
window.location.assign('../html/main.html')
}
})
})
document.addEventListener('DOMContentLoaded',function(event){
document.addEventListener('selectstart',function(event){
event.preventDefault();
})
document.addEventListener('contextmenu',function(event){
event.preventDefault();
})
})
$(function(){
$('.change-register-button').on('click',function(){
$('.login').animate(
{
'left':'240px'
},400,function(){
$('.login').css({'display':'none',
'left':'60px'})
$('.change-register-box').css('display','none')
$('.register').css('display','block')
$('.change-login-box').css('display','block')
}
)
})
$('.change-login-button').on('click',function(){
$('.register').animate(
{
'right':'240px'
},400,function(){
$('.register').css({'display':'none',
'right':'60px'})
$('.change-login-box').css('display','none')
$('.login').css('display','block')
$('.change-register-box').css('display','block')
}
)
})
})