一:源码获取
?说明:
这篇文章是完整功能的登录注册,包含了基于本地存储的注册,登录,以及密码修改功能,登录包含错误三次冻结账户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') } ) })})