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;
}
.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_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="" placeholder="请输入用户名" />
                        </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();
   		    }
   		}
   		
   		//客户端校验
		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();
	   			}
   		});
		
		//清除历史记录
   		function clear_history(){
   			window.top.remove.init({"title":"确定清除历史记录吗？","func":function(success){
   				if(success){
   					storage.clear();
   					$(".history").hide();
   				}else{
   					console.log("false");
   				}
   			}});
   			window.top.remove.show();
   			$(".mb_head .close img").css("display","none");
   		}
		//保存登录记录
		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>