<%@ 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;
}
效果图: