<!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>