WebRoot/WEB-INF/jsp/system/index/login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>南昊作业考试管理平台</title>
<!-- Bootstrap -->
<link href="static/css/bootstrap.min.css" rel="stylesheet">
<link href="static/login/style_login.css" rel="stylesheet">
<script src="static/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="static/js/jquery.cookie.js"></script>
<script src="static/login/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="static/js/jQuery.md5.js"></script>
<script type="text/javascript" src="static/js/jquery.tips.js"></script>
<script type="text/javascript" src="static/js/lang.js"></script>
<script type="text/javascript" src="static/js/remove.js"></script>
<script type="text/javascript">
	if(lang() != 'zh'){
		
	}
</script>
<style type="text/css">
html,body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
img {
	width: 100%;
	display: inherit;
}
p {
	margin: 0;
}
.login {
	width: 100%;
	min-width: 1200px;
	height: 100%;
	background: #EFEEF5;
}
.login_box {
	width: 82.3%;
	min-width: 987.6px;
	max-width: 1581px;
	height: 77.87%;
	background: #fff;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 9;
	box-shadow: 0px 18px 33px 10px rgba(89, 89, 89, 0.2);
}
.error {
	font-size: 12px;
	color: #F25F62;
	float: left;
}
.error img {
	width: 12px;
	float: left;
	margin-top: 3px;
	margin-left: 10px;
}
.error_info {
	margin-left: 5px;
}
input:focus-within {
	border-style: solid;
	border-color: #48A3A5;
	box-shadow: 0 0 5px #48A3A5;
}
.login_box .login_box_left_box {
	width: 40%;
	float: left;
}
.login_box .login_box_left_box .login_logo {
	width: 140px;
	margin-top: 80px;
	margin-left: 60px;
}
.login_box .login_box_left_box .login_box_contianer {
	margin-top: 60px;
}
.login_box .login_box_left_box .login_box_contianer h3 {
	text-align: center;
}
.login_box .login_box_left_box .login_box_contianer .form_item {
	width: 70%;
	margin: 0 auto;
	margin-bottom: 20px;
	text-align: center;
	position: relative;
}
.login_box .login_box_left_box .login_box_contianer .form_item input {
	width: 90%;
	height: 50px;
	line-height: 50px;
	padding: 0 10px;
	border-radius: 5px;
	border: 1px solid #ccc;
	outline: none;
	background: #ECECEC
}
.login_box .login_box_left_box .login_box_contianer .form_item .icon_down
	{
	position: absolute;
	right: 10px;
	top: 9px;
	width: 20px;
	padding: 0 10px;
}
.login_box .login_box_left_box .login_box_contianer .history {
	width: 90%;
	position : absolute;
	left:10px;
	top: 50px;
	padding: 0 10px;
	height: auto;
	max-height: 240px;
	background: #fff;
	overflow: auto;
	border: 1px solid #ccc;
	z-index: 999;
	position: absolute;
}
.login_btn {
	outline-style: none;
	border: none;
	color: #fff;
	width: 90%;
	height: 50px;
	line-height: 50px;
	border-radius: 8px;
	background: #48A3A5;
}
.login_box .login_box_right_box {
	height: 100%;
	overflow: hidden;
	margin-left: 40%;
	position: relative;
	background: #48A3A6;
}
.login_box .login_box_right_box .dec {
	position: absolute;
	bottom: 100px;
	left: 100px;
}
.login_box .login_box_right_box .dec_big {
	font-size: 40px;
	color: #ECECEC;
}
.login_box .login_box_right_box .dec_mini {
	font-size: 24px;
	color: #ECECEC;
}
.login_box .login_box_right_box .right_box_img {
	width: 400px;
	position: absolute;
	right: -23px;
	top: -25px;
}
.right_box_bottom_img {
	width: 200px;
	height: 200px;
	background: #fff;
	border-radius: 100px;
	position: absolute;
	bottom: -100px;
	right: -100px;
}
.right_box_bottom_img img {
	width: 25%;
	margin: 30px 0 0 30px;
}
.login .left_bottom_img {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 19%;
}
.login .right_bottom_img {
	width: 6.25%;
	position: absolute;
	right: 5%;
	bottom: 3%;
}
.text_right {
	text-align: right !important;
}
.text_right input {
	display: inline;
	vertical-align: middle;
}
.text_right span {
	vertical-align: middle;
}
</style>
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
	<div class="login">
		<div class="login_box">
			<div class="login_box_left_box">
				<div class="login_logo">
					<img src="static/login/login_logo.png" alt="">
				</div>
				<div class="login_box_contianer">
					<h3>登录账号</h3>
					<div class="form_item">
						<input id="loginname" type="text" value="" autoComplete="off"
							placeholder="请输入用户名" />
						<svg t="1554790328236" class="icon_down" style=""
							viewBox="0 0 1024 1024" version="1.1"
							xmlns="http://www.w3.org/2000/svg" p-id="2161"
							xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32">
							<defs>
							<style type="text/css"></style></defs>
							<path
								d="M863.321996 251.674996 194.108395 251.674996 528.677333 621.186771Z"
								p-id="2162" fill="#333333"></path></svg>
						<div class="history">
							<ul>
							</ul>
							<p class="clear_history">
								<a  onclick="clear_history()">清除记录</a>
							</p>
						</div>
					</div>
					<div class="form_item">
						<input id="password" type="password" value="" placeholder="请输入密码" />
					</div>
					<div class="form_item text_right">
						<!-- <div class="error">
                                <img src="static/login/login_5.png" alt="">
                                <span class="error_info">密码输入不正确</span>
                            </div>  -->
						<input id="rem_flag" style="width:17px;height:17px;"
							type="checkbox"> <span>记住密码</span>
					</div>
					<div class="form_item">
						<button href="#" type="submit" onclick="severCheck();"
							class="login_btn">登录</button>
					</div>
				</div>
			</div>
			<div class="login_box_right_box">
				<div class="dec">
					<p class="dec_big">南昊考试作业管理平台</p>
					<p class="dec_mini">让天下师生减负提分！</p>
				</div>
				<div class="right_box_img">
					<img src="static/login/login_11.png" alt="">
				</div>
				<div class="right_box_bottom_img">
					<img src="static/login/login_7.png" alt="">
				</div>
			</div>
		</div>
		<div class="left_bottom_img">
			<img src="static/login/login_10.png" alt="">
		</div>
		<div class="right_bottom_img">
			<img src="static/login/cycle.png" alt="">
		</div>
	</div>
	<script type="text/javascript">
   
   		if(window.top != window.self){
	   		window.top.location.href = "<%=basePath%>";
   		}
   		
   		document.onkeydown = function (e) { // 回车提交表单
   		// 兼容FF和IE和Opera
   		    var theEvent = window.event || e;
   		    var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
   		    if (code == 13) {
   		    	severCheck();
   		    }
   		}
   		
   		$(".icon_down").click(function(){
   			$("#loginname").focus();
   			
   		});
   		
   		//客户端校验
		function check() {
			if ($("#loginname").val() == "") {
				$("#loginname").tips({
					side : 2,
					msg : '用户名不得为空',
					bg : '#FF5080',
					time : 3
				});
				$("#loginname").focus();
				return false;
			} else {
				$("#loginname").val(jQuery.trim($('#loginname').val()));
			}
			if ($("#password").val() == "") {
				$("#password").tips({
					side : 2,
					msg : '密码不得为空',
					bg : '#FF5080',
					time : 3
				});
				$("#password").focus();
				return false;
			}
			
			 
			return true;
		}
   		
   		
		
		//服务器校验
		function severCheck(){
			if(check()){
				var loginname = $("#loginname").val();
				var password = $("#password").val();
				var code = loginname+";;;"+password+";;;" + $("#code").val();
				$.ajax({
					type: "POST",
					url: 'login_login',
			    	data: {KEYDATA:code,tm:new Date().getTime()},
					dataType:'json',
					cache: false,
					success: function(data){
						if("success" == data.result){
							if($("#rem_flag").prop("checked"))   //如果选择了记住密码
								saveCookie();
							if(data.teacher != null){
								window.location.href="main/teacher";
							}else if(data.admin != null){
								window.location.href="main/admin";
							}else{
								window.location.href="main/index";
							}
						}else if("usererror" == data.result){
							$("#loginname").tips({
								side : 1,
								msg : "用户名或密码有误",
								bg : '#FF5080',
								time : 15
							});
							$("#loginname").focus();
						}else if("codeerror" == data.result){
							$("#code").tips({
								side : 1,
								msg : "验证码输入有误",
								bg : '#FF5080',
								time : 15
							});
							$("#code").focus();
						}else{
							$("#loginname").tips({
								side : 1,
								msg : "缺少参数",
								bg : '#FF5080',
								time : 15
							});
							$("#loginname").focus();
						}
					}
				});
			}
		}
		
		var storage=window.localStorage;
		var userNameList=[];
		var passWordList=[];
		//console.log(JSON.parse(storage.getItem('userNameList')));
		
		$("#loginname").focus(function(e){
	   		$("#password").attr("type","password");
	   			var _html="";
	   			var u_list=JSON.parse(storage.getItem('userNameList'));
	   			console.log(u_list);
	   			if((u_list!=null)||(u_list.length>0)){
	   				$("#loginname").blur(function(){
	   	   	   			$(".history").hide();
	   	   	   		})
	   	   			for(var i=0;i<u_list.length;i++){
	   	   				_html+='<li>'+u_list[i]+'</li>';
	   	   			}
	   	   			$(".history ul").html(_html);
	   	   			$(".history").show();
	   			}
   		});
   		
   		$('.history').hover(function(){         //鼠标悬停下拉框时，解绑blur事件
   	   		$("#loginname").unbind("blur");
   		},function(){
   			$("#loginname").blur(function(){    //鼠标移出下拉框时，添加blur事件
	   	   		$(".history").hide();
	   	   	})
   		});
   		
   		$(document).on('click','.history li',function(){
   			var p_list=JSON.parse(storage.getItem('passWordList'));
   			$("#loginname").val($(this).text());
   			$("#password").val(p_list[$(this).index()]);
   			$(".history").hide();
   		})
		
		//清除历史记录
   		function clear_history(){
			storage.clear();
			$(".history").hide();
   		}	
		//保存登录记录
		function saveCookie() {
			if(!window.localStorage){
	            alert("浏览器不支持localstorage");
	            
	        }else{
	            //主逻辑业务
	        	
	            userNameList=JSON.parse(storage.getItem('userNameList'));
	            passWordList=JSON.parse(storage.getItem('passWordList'));
	            
	           
	            if(userNameList==null){
	            	var userNameList=[];
	        		var passWordList=[];
	            	userNameList.push($("#loginname").val());
	            	passWordList.push($("#password").val());
	            	
	            	storage.setItem('userNameList',JSON.stringify(userNameList));
	            	storage.setItem('passWordList',JSON.stringify(passWordList));
	            }else{
	            	
	            	if(userNameList.indexOf($("#loginname").val())>-1){
		            	return false;
		            }else{	            	
		            	userNameList.push($("#loginname").val());
		            	passWordList.push($("#password").val());
		            	storage.setItem('userNameList',JSON.stringify(userNameList));
		            	storage.setItem('passWordList',JSON.stringify(passWordList));
		            }
	            }
	            //console.log(userNameList);
	        }
			
		}
	</script>
	<!-- 软键盘控件start -->
	<script type="text/javascript"
		src="static/login/keypad/js/form/keypad.js"></script>
	<script type="text/javascript"
		src="static/login/keypad/js/framework.js"></script>
</body>
</html>