0
点赞
收藏
分享

微信扫一扫

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

小编 2022-07-14 阅读 102

一:源码获取


二:页面展示

 三:部分代码演示

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

相关推荐

0 条评论