炫酷登录注册 完整功能版【本地存储+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

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

 数据存放形式

炫酷登录注册 完整功能版【本地存储+JS+HTML+CSS+jQuery】_第1张图片

 三:部分代码演示

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

你可能感兴趣的:(JavaScript,零基础入门,30天拿下前端必经之路,jQuery,javascript,html,css,前端,jquery)