`
chaoyi
  • 浏览: 290150 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

后台jsp loginOfAdmin.jsp

 
阅读更多 
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<base href="<%=basePath%>">
<title>新蛋后面界面登陆</title>
<link rel="stylesheet" type="text/css" href="admin/css/basic.css" />
<link href="admin/css/loginOfAdmin.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="admin/js/loginOfAdmin.js"></script>
</head>

<body>
	<div class="interface">
		<div class="title">
			<img src="admin/images/loginOfAdmin/title.jpg" width="330" height="48" />
		</div>

		<form action="loginOfAdmin" method="post" name="adminForm">
			<div class="login">
				<input type="text" class="admin" name="inputAdmin" id="inputAdmin" /> <input
					type="password" class="adminPass" name="inputPass" id="inputPass" /> <input
					type="submit" class="submit" value="登陆" />
			</div>
		</form>
	</div>
</body>
</html>
<<c:if test="${flag==false }">
	<script type="text/javascript">failureOfTips();</script>
</c:if>

 

/* CSS Document */


/*登陆界面*/
.interface{ width:600px; height:455px; background:#ededed; margin:60px auto 0 auto;}

.title{ width:600px; height:82px; background:url(../images/loginOfAdmin/titleBj.jpg) repeat-x;}
.title img { margin-left:127px; margin-top:24px;}

.login{ background:url(../images/loginOfAdmin/loginBj.jpg) no-repeat; width:419px; height:220px; margin-left:86px; margin-top:25px; padding-top:95px;}
.login input{ display:block;}
.login .admin{ border:1px solid #b5b5b5; width:187px; height:41px; margin-left:95px; background:url(../images/loginOfAdmin/adminIcon.jpg) no-repeat; padding-left:41px; color:#333; font-size:14px; font-family:"Arial";}
.login .adminPass{ border:1px solid #b5b5b5; width:187px; margin-top:18px; height:41px; margin-left:95px; background:url(../images/loginOfAdmin/adminPassIcon.jpg) no-repeat; padding-left:41px;}
.login .submit{ background:#009fe9; width:140px; height:45px; margin-left:139px; margin-top:22px; border:none; color:#fff; font-family:"微软雅黑"; font-size:16px;}

 

// JavaScript Document

function $(id){  
    return document.getElementById(id);  
} 

window.onload = function(){
	
	//管理员账号
	$("inputAdmin").value='请输入管理员账号';
	$("inputAdmin").onfocus = function(){
		inputAdminOnfocus();
	};
	$("inputAdmin").onblur = function(){
		inputAdminOnblur(this);
	};
	
	//管理员密码
	$("inputPass").onblur = function(){
		inputPassOnblur(this);
	};
	//给表单注册提交事件  
    document.adminForm.onsubmit = function(){  
		return check();
    };
	
};

function inputAdminOnfocus(){
	var inputAdmin = $("inputAdmin");
	if(inputAdmin.value=='请输入管理员账号'){
		inputAdmin.value="";
	}
}
function inputAdminOnblur(obj){
	var inputAdmin = $("inputAdmin");
	inputAdmin.style.border = "1px solid #b5b5b5";
	if("" == obj.value||"请输入管理员账号" == obj.value){
		inputAdmin.style.border = "1px solid #c00";
		inputAdmin.value='请输入管理员账号';
		return false;
	}
	inputAdmin.style.border = "1px solid #b5b5b5";
	return true;
}

function inputPassOnblur(obj){
	var inputPass = $("inputPass");
	inputPass.style.border = "1px solid #b5b5b5";
	if("" == obj.value){
		inputPass.style.border = "1px solid #c00";
		return false;
	}
	inputPass.style.border = "1px solid #b5b5b5";
	return true;
}

function failureOfTips(){
	var inputAdmin = $("inputAdmin");
	inputAdmin.style.border = "1px solid #c00";
	var inputPass = $("inputPass");
	inputPass.style.border = "1px solid #c00";
}

function check(){
	var inputAdmin = inputAdminOnblur($("inputAdmin"));
	var inputPass = inputPassOnblur($("inputPass"));
	if(inputAdmin && inputPass ){
		return true;
	}
	return false;
}

 

效果图：

 

 

  • 大小: 21.4 KB
分享到：
| 后台servlet UserNewSer
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics