欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

问题求助。 博客分类： 代码交流  

程序员文章站 2024-03-14 13:03:46
...
<!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>

 

上一篇： redis配置文件详解 redis配置文件redis配置文件详解

下一篇： 小程序switch Bug 博客分类： 代码交流  

推荐阅读