<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
<style>
body{
padding: 0px;
margin: 0px;
background-color: #E4E4E4;
}
.login_top{
width: 100%;
height: 150px;
}
.login_middle{
width: 100%;
height: 150px;
}
.login_input{
width: 100%;
height: 40px;
margin-top: -1px;
border: 0px;
font: 14px "微软雅黑" ;
outline: none;
}
.login_login{
width: 90%;
height: 40px;
margin: 10px 5% 0 5%;
border-radius: 5px;
border: 0px;
color: white;
background-color: #0000FF;
font: 14px "微软雅黑";
}
.login_forgetpwd{
position: fixed;
left: 0px;
bottom: 0px;
font: 12px "微软雅黑";
color: blue;
}
.login_regist{
position: fixed;
right: 0px;
bottom: 0px;
font: 12px "微软雅黑";
color: blue;
}
</style>
</head>
<body>
<div class="login_top">
<div id="login_errorshow" style="width: 100%;height: 43px;background-color: orange;">
<div style="width:100%;height: 9px;"></div>
<div id="login_errortext" style="width: 90%;height: 25px;text-align:center; font: 13px '微软雅黑'; color: white; margin: 0 5% 9px 5%;">
</div>
</div>
</div>
<div class="login_middle">
<input type="text" id="login_username" class="login_input" placeholder="用户名/手机号" />
<input type="password" id="login_userpwd" class="login_input" placeholder="密码" style="border-top: 1px solid #E4E4E4;"/>
<button id="login_button" class="login_login">登录</button>
</div>
<div id="login_bottom">
<div class="login_forgetpwd">
<a href="forgetpwd.html" class="login_forgetpwd" style="text-decoration: none;">忘记密码</a>
</div>
<div class="login_regist">
<a href="regist.html" class="login_regist" style="text-decoration: none;">注册</a>
</div>
</div>
</body>
<script type="text/javascript">
$("#login_errorshow").hide();
$("#login_button").click(function(){
var l_name=localStorage.getItem("username");
var l_pwd=localStorage.getItem("userpwd");
var login_name=$("#login_username").val();
var login_pwd=$("#login_userpwd").val();
if(l_name!=login_name){
$("#login_errorshow").show();
$("#login_errortext").html("用户名不存在!")
login_errorhide();
} else if(l_pwd!=login_pwd){
$("#login_errorshow").show();
$("#login_errortext").html("密码错误!")
login_errorhide();
}else{
window.location.href="homepage.html";
localStorage.setItem("zidongdenglu","yes");
}
});
function login_errorhide(){
setTimeout(function(){
$("#login_errorshow").hide();
},2000);
};
$(function(){
var flag=localStorage.getItem("zidongdenglu");
if(flag=="yes"){
if(localStorage.getItem("username")&&localStorage.getItem("userpwd")){
window.location.href="homepage.html";
}
}
});
//判断用户是否在输入,如果再输入就把下面的内容隐藏掉,不然会被键盘给顶起来
//这里固定的最下方的div会被键盘给顶上来,只能设置隐藏,但是如果隐藏了的话,
// 键盘不是失焦而关掉,而是点击键盘上的关闭而关闭的键盘就会出现div没有显示,最下方是空白的情况。求助怎么解决。
$("#login_username").focus(function(){
$("#login_bottom").hide();
});
$("#login_username").blur(function(){
$("#login_bottom").show();
});
$("#login_userpwd").focus(function(){
$("#login_bottom").hide();
});
$("#login_userpwd").blur(function(){
$("#login_bottom").show();
})
</script>
</html>