1、登录界面添加记住密码功能

jack
1 parent 05dfd5ca
Showing 3 changed files with 111 additions and 18 deletions
WebRoot/WEB-INF/jsp/sunvote/homework/homework_report.jsp
WebRoot/WEB-INF/jsp/system/index/login.jsp
WebRoot/static/login/style_login.css
@@ -64,7 +64,7 @@
 					<td><div style="width:150px;text-align:center;">课程统计: ${fn:length(var.HOMEWORKS)}</div></td>
 					<td><div style="width:150px;text-align:center;">班级名册: ${var.CLASS_NAME}</div></td>
-					<td><div style="width:150px;text-align:center;"><span>学生人数: ${INDE.STUDENT_NUM}</span></div></td>
+					<td><div style="width:150px;text-align:center;"><span>学生人数: ${var.STUDENT_NUM}</span></div></td>
 					<td></td>
@@ -125,22 +125,20 @@
 						<td class="center"><div style="width:150px;"></div></td>
 						<td class="center"><div style="width:80px;"></div></td>
 						<c:forEach items="${var.HOMEWORKS}" var="var_h" varStatus="vs">
-							<td class="center"><div style="width:80px;margin:0 auto;">${var.AVG_SCORE}</div></td>
+							<td class="center"><div style="width:80px;margin:0 auto;">${var_h.GET_SCORE}</div></td>
 						</c:forEach>
 					</tr>
 					<tr>
 						<td class="center"><div style="width:150px;">班级课程平均得分率</div></td>
 						<td class="center"><div style="width:150px;"></div></td>
 						<td class="center"><div style="width:80px;"></div></td>
-						<c:forEach items="${testpaperList}" var="var" varStatus="vs">
-							<td class="center"><div style="width:80px;margin:0 auto;"><fmt:formatNumber type="number"
-									value="${var.TOTAL_SCORE == 0 ? 0: (var.AVG_SCORE / var.TOTAL_SCORE * 100)}"
-									maxFractionDigits="2" />%</div></td>
+						<c:forEach items="${var.HOMEWORKS}" var="var_h" varStatus="vs">
+							<td class="center"><div style="width:80px;margin:0 auto;">${var_h.GET_SCORE_PERSENT }</div></td>
 						</c:forEach>
 					</tr>
 					<c:choose>
-						<c:when test="${not empty studentList}">
+						<c:when test="${not empty $var.HOMEWORKS}">
 							<c:forEach items="${studentList}" var="var" varStatus="vs">
 								<tr>
 									<%-- <td class="center"><a
@@ -61,11 +61,25 @@
 		</div>
 		<div class="content_b">
 			<div class="form_box">
-				<form action="" method="post" name="loginbox" id="loginbox">
-					<input type="text" name="loginname" id="loginname" value=""
-						placeholder="用户名" /> <input type="password" name="password"
-						id="password" placeholder="密   码" value="" /> <a href="#"
-						onclick="severCheck();" class="login_btn">登录</a>
+				<form action="" method="post" name="loginbox" id="loginbox" >
+					<div class="name_box">
+						<input type="text" name="loginname" id="loginname" value="" placeholder="用户名"  autoComplete="off"/>
+						<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>
+					<div class="psw_box">
+						<input type="password" name="password" id="password" placeholder="密   码" value="" autoComplete="off"/>
+						<div class="rember">
+							<input type="checkbox" id="rem_flag"/>
+							<span>记住密码</span>
+						</div>
+					</div>
+					<a href="#" onclick="severCheck();" class="login_btn">登录</a>
+					
+					<div class="history">
+						<ul>
+
+						</ul>
+					</div>
 				</form>
 			</div>
@@ -87,6 +101,33 @@
    		    	severCheck();
    		    }
    		}
+   		
+   		$(".icon_down").click(function(){
+   			$("#loginname").focus();
+   			
+   		});
+   		$("#loginname").focus(function(){
+   			var _html="";
+   			var u_list=JSON.parse(storage.getItem('userNameList'));
+   			for(var i=0;i<u_list.length;i++){
+   				_html+='<li>'+u_list[i]+'</li>';
+   			}
+   			$(".history ul").html(_html);
+   			$(".history").toggle();
+   		});
+   		
+   		
+   		$(document).on('hover','.history li',function(){
+   			var p_list=JSON.parse(storage.getItem('passWordList'));
+   			$("#loginname").val($(this).text());
+   			$("#password").val(p_list[$(this).index()]);
+   			//$(".history").hide();
+   		})
+   		$("#loginname").blur(function(){
+   			$(".history").hide();
+   		})
+
+   		
    		//客户端校验
 		function check() {
@@ -139,7 +180,8 @@
 					cache: false,
 					success: function(data){
 						if("success" == data.result){
-							saveCookie();
+							if($("#rem_flag").prop("checked"))   //如果选择了记住密码
+								saveCookie();
 							if(data.teacher != null){
 								window.location.href="main/teacher";
 							}else if(data.admin != null){
@@ -180,15 +222,58 @@
 			}
 		}
+		var storage=window.localStorage;
+		var userNameList=[];
+		var passWordList=[];
+		
+		//console.log(JSON.parse(storage.getItem('userNameList')));
+		
 		function saveCookie() {
-			if ($("#saveid").attr("checked")) {
-				$.cookie('loginname', $("#loginname").val(), {
+			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);
+	            
+	            
+	            
+	        }
+			
+				/*$.cookie('loginname', $("#loginname").val(), {
 					expires : 7
 				});
 				$.cookie('password', $("#password").val(), {
 					expires : 7
-				});
-			}
+				});*/
+			
 		}
 	</script>
 		<script type="text/javascript"
@@ -22,7 +22,17 @@ color: #666666;
 .content{width:100%;height:100%;}
 .content_t{background:#01a5a6;height:40%;position:relative;}
 .content_t img{position:absolute;bottom:0;width:30%;left:35%;display:block;}
-.content_b .form_box{width:25%;margin:0 auto;margin-top:3%;}
+.content_b .form_box {width:25%;margin:0 auto;margin-top:3%;}
+.content_b .form_box #loginbox{position:relative;}
+.content_b .form_box .name_box{position:relative;}
+.content_b .form_box .icon_down{position:absolute;right:10px;top:9px;width:20px;}
 .content_b input{display:block;width:100%;height:50px;background:#f2f2f2;border:1px solid #cccccc;line-height:50px;box-sizing:border-box;padding:0 12px;outline-style:none;font-size:20px;}
 .content_b input:nth-child(2){margin-top:15px;}
 .content_b .login_btn{display:block;width:100%;background:#13b5b1;color:#fff;font-size:24px;text-align:center;padding:2% 0;margin-top:10%;text-decoration:none;}
+.history{width:100%;position:absolute;top:50px;height:auto;max-height:240px;background:#fff;overflow:auto;border:1px solid #ccc;display:none;}
+.history ul{padding:0;margin:0;}
+.history li{height:40px;border-bottom:1px solid #ccc;list-style:none;line-height:40px;padding:0 12px;font-size:20px;}
+.history li:hover{background:#ccc;}
+.rember{text-align:right;}
+.rember input{width:16px;height:16px;display:inline;vertical-align:middle;margin:0;}
+.rember span{vertical-align:middle;}
 \ No newline at end of file