炫酷登录注册 完整功能版【本地存储 JS HTML CSS jQuery】

一：源码获取

🔍说明：

      这篇文章是完整功能的登录注册，包含了基于本地存储的注册，登录，以及密码修改功能，登录包含错误三次冻结账户1000s等细微功能，适合新入门前端的小伙伴拿来学习使用，下面是这个源码的资源链接，本资源是积分下载需要VIP，没有VIP的小伙伴私聊我获取即可

https://download.csdn.net/download/weixin_52212950/86082219https://download.csdn.net/download/weixin_52212950/86082219

---

🔍无功能版本：

       如果需要自己使用后端语言写功能此处获取无功能版本的页面即可，获取方式同上

一款非常炫酷登录注册页面_模拟12306售票系统-Javascript文档类资源-CSDN下载一个非常炫酷的的登录注册页面，登录注册切换由jQuery实现，原理简单易懂并且十几行代码就完成了模拟12306售票系统更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/weixin_52212950/85799335

二：页面展示

------ 登录页面及所有错误提示 

------ 注册页面及所有错误提示

------ 登陆密码错误三次冻结1000s

------ 找回密码及其错误提示 

 数据存放形式

 三：部分代码演示

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')
            }
        )
  })
})