<!doctype html> <html> <head> <meta charset="utf-8" /> <title>登陆框的制作</title> <script src="jquery-1.11.3.js"></script> <script src="jquery.cookie.js"></script> <script src="jquery.md5.js"></script> <style> *{ padding:0; margin:0; list-style:none; font-style:normal; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; } body{ font-family:‘Microsoft Yahei‘,Arial; color:#5e5e5e; } h1,h2,h3,h4,h5,h6{ font-size:14px; margin:0; padding:0; } table{ border-collapse:collapse; border-spacing:none; } input{ font-size:12px; outline:none; border:none; vertical-align:middle; } input:focus{ outline:none; } a { color: #808080; cursor: pointer; outline: 0 } a:hover, a:link, a:visited { text-decoration: none } .clearfix { display: inline-table; display: block; zoom: 1 } .clearfix:after { clear: both; content: "."; display: block; height: 0; visibility: hidden } .clearfix:before, .clearfix:after { display: table; line-height: 0; content: ""; } img{ vertical-align:top; } /*登录框的样式*/ body{ width:100%; height:100%; background:#CFD7EB; } #login{ width:445px; height:390px; background:#fff; margin:auto; position:absolute; top:0; left:0; bottom:0; right:0; padding:35px; } .loginTitle{ height:24px; margin-bottom:9px; } .loginTitle>h1{ font-size:20px; float:left; color:#3F4040; } .loginTitle>p{ float:right; color:#85827D; padding-left:30px; background:url("go.png") no-repeat 0 0; } #loginForm{ } #loginForm .loginInfo{ height: 27px; margin: 10px auto; font-size: 14px; line-height: 27px; } #loginForm .loginInfo .loginInfoRm{ color: #EB2C4F; background-color:#FFF6D2; padding-left: 5px; } #loginForm .loginInfo .loginInfoNp{ color:#EB2C4F; background-color:#FFEBEB; padding-left: 5px; } #loginForm .loginDetail{ height:34px; line-height:34px; width:375px; margin-bottom:16px; } #loginForm .loginDetail input{ width:375px; height:34px; line-height:1; line-height:34px\9; border:1px solid #D0CCC7; padding-left:10px; } #loginForm .loginDetail input:focus{ border:1px solid #e4393c; } #loginForm .code{ /*vertical-align:top;*/ } #loginForm .code input{ width:160px; vertical-align:top; margin-right:10px; } #loginForm .code span.codeImg{ display:inline-block; width:83px; height:34px; } #loginForm .code span.codeImg img{ max-height:34px; } #loginForm .code>b{ display:inline-block; font-size:10px; color:#ccc; } #loginForm .code>b i{ display:inline-block; padding-left:5px; color:#0078D7; cursor:pointer; } .loginR{ margin:5px 0px; } .loginRember{ width:80px; display:inline-block; font-size:10px; float:left; } .loginNoRember{ width:100px; display:inline-block; font-size:10px; float:right; text-align:right; } li.loginSubmit{ margin-top:20px; height:40px; width:375px; } li.loginSubmit button{ background:#C62630; border:none; height:40px; width:375px; color:#fff; font-weight:600; font-size:18px; cursor:pointer; } .none{ display:none; } </style> </head> <body> <div id="login"> <div class="loginTitle clearfix"> <h1 class="userLogin">用户登录</h1> <p class="userRegister"><a href="#">去注册</a></p> </div> <div id="loginForm"> <div class="loginInfo"> <div class="loginInfoRm">公共场所不建议自动登陆,以防账号丢失!</div> <div class="loginInfoNp none"></div> </div> <ul class="loginContent"> <li class="loginDetail"> <input type="text" id="userName" size="20" maxlength="20" value="" placeholder="用户名/手机号" /> </li> <li class="loginDetail"> <input type="password" id="userPwd" size="20" maxlength="20" value="" placeholder="密码" /> </li> <li class="loginDetail code"> <input type="text" id="userCode" size="20" maxlength="6" value="" placeholder="验证码" /> <span class="codeImg"> <img src="https://www.phtfdata.com/web/checkCode/queryCheckCode.do?timestamp=1470897792364" /> </span> <b class="codeChange">看不清?<i onclick="queryCheckCode()">换一张</i></b> </li> <li class="loginR clearfix"> <p class="loginRember"> <input id="userRm" type="checkbox" checked /> 自动登录 </p> <div class="loginNoRember"><a href="#">忘记密码?</a></div> </li> <li class="loginSubmit"> <button id="submit" type="submit">登 录</button> </li> </ul> </div> </div> <script> //ie678兼容placeholder属性 var placeholderJs={ _check:function(){ return ‘placeholder‘ in document.createElement("input"); }, init:function(){ if(!this._check()){ this.fix(); } }, fix:function(){ $(":input[placeholder]").each(function(index,element){ $(this).wrap($("<div style=‘float:left‘></div>").css({ position:‘relative‘, zoom:‘1‘, margin:‘none‘, padding:‘none‘, background:‘none‘, border:‘none‘ })); var tex=$(this).attr(‘placeholder‘); var holder=$("<span></span>").text(tex).css({ position:‘absolute‘, left:‘10px‘, top:‘2px‘, height:$(this).outerHeight(true), lineHeight:$(this).outerHeight(true)+‘px‘, }).appendTo($(this).parent()); $(this).focusin(function(e){ holder.hide(); $(this).css("border","1px solid #990302"); }).focusout(function(e){ if(!$(this).val()){ holder.show(); $(this).css("border","1px solid #b4b9bd"); } }); holder.click(function(e){ holder.hide(); $(this).siblings("input").focus(); }); }); } }; $(function(){ placeholderJs.init(); }); //自动登录功能(记住用户名和密码) $(document).ready(function(){ if($.cookie("userRm")==‘true‘){ $("#userRm").attr("checked")=="checked"; $("#userName").val()=$.cookie("username"); $("#userPwd").val()=$.cookie("userpwd"); } }); $("#submit").click(function(){ if($("userRm").attr("checked")){ var userName=$("#userName").val(); var userPwd=$("#userPwd").val(); $.cookie("userRm",‘true‘,{expires:7}); /*不加密的方法 $.cookie(‘userName‘,userName,{expires:7}); $.cookie(‘userPwd‘,userPwd,{expires:7});*/ //加密的方法 var b=new Base64(); var name=b.encode(userName); var pwd=b.encode(userPwd); $.cookie(‘userName‘,name,{expires:7}); $.cookie(‘userPwd‘,pwd,{expires:7}); }else{ $.cookie(‘userRm‘,‘false‘,{expires:-1}); $.cookie(‘userName‘,‘‘,{expires:-1}); $.cookie(‘userPwd‘,‘‘,{expires:-1}); } }); //点击自动登录,显示风险提示,取消自动登录,风险提示隐藏 $("#userRm").click(function(){ if(this.checked){ $(".loginInfoRm").show(); $(".loginInfoNp").hide(); }else{ $(".loginInfoRm").hide(); } }); //获取焦点清空密码和用户名 function emptyLoginName(){ if($("#loginName").val()=="请输入用户名"){ $("loginName").val(""); } } function emptyLoginPwd(){ if($("#loginPwd").val()=="请输入密码"){ $("#loginPwd").val(""); } } //点击获得验证码的方法 function queryCheckCode(){ var srcImg=$(".codeImg img"); var src=$(".codeImg img").attr("src"); srcImg.attr("src",chgUrl(src)); } function chgUrl(url){ var timestamp=(new Date()).valueOf(); var urlUrl=url.substring(0,56); if(url.indexOf("&")>=0){ url=url+‘&tamp=‘+timestamp; }else{ url=url+‘?timestamp=‘+timestamp; } return url; } //登录的验证方法,用到和后台交互,是否用户名已存在,由于没有写后台代码,暂时先不写交互 $("#submit").click(function(){ login(); queryCheckCode(); }); function login(){ var userName=$("#userName").val(); var userPwd=$("#userPwd").val(); var userCode=$("#userCode").val(); //简单的进行验证 if(userName.length==0){ $(".loginInfoRm").hide(); var msg=‘用户名不能为空‘; $(".loginInfoNp").text(msg); $(".loginInfoNp").show(); return false; }else if(userPwd.length==0){ $(".loginInfoRm").hide(); var msg=‘密码不能为空‘; $(".loginInfoNp").text(msg); $(".loginInfoNp").show(); return false; }else if(userPwd.length<6){ $(".loginInfoRm").hide(); var msg=‘密码不能小于6位‘; $(".loginInfoNp").text(msg); $(".loginInfoNp").show(); return false; }else if(userCode.length==0){ $(".loginInfoRm").hide(); var msg=‘验证码不能为空‘; $(".loginInfoNp").text(msg); $(".loginInfoNp").show(); return false; } //验证用户名是否存在,和后台进行交互, } </script> </body> </html>
时间: 2024-11-06 13:15:19