jsp教程之如何復原一個頁面
阿新 • • 發佈：2018-12-12
我現在要做的是復原以下的頁面
程式碼如下：
<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" 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 HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>華金礦業-LED輸出</title> <!-- 首頁 --> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <link rel="stylesheet" type="text/css" href="css/index.css"> <script type="text/javascript"> function hide(){ var id=document.getElementById("center_img"); var name=id.getAttribute("name"); var left=document.getElementById("center-left"); if(name=="block"){ left.setAttribute("style", "display:none;"); id.setAttribute("name", "none"); }if(name=="none"){ left.setAttribute("style", "display:block;"); id.setAttribute("name", "block"); } } function display(a){ var elements=[]; //獲得所有的li標籤 var list=document.getElementsByTagName("li"); var len=list.length;//獲得長度 //把class=sub-menu的li都放在集合裡面 for(var i=0;i<len;i++){ if(list[i].className== "sub-menu"){ elements[elements.length]=list[i]; } } /*把所有的隱藏 */ for(var i=0;i<elements.length;i++){ //獲得下面的ul var ul=elements[i].childNodes[3]; /* 設定屬性為隱藏 */ ul.setAttribute("style","display:none"); /* 點選當前元素的Ul設定可見 */ } /* 對所有的input背景顏色設定 */ var tree=document.getElementsByName("tree"); for(var i=0;i<tree.length;i++){ tree[i].setAttribute("style", "background-color:#E1F1FD;"); } var input=document.getElementById(a); input.setAttribute("style", "background-color:#5094D6;"); var ula=input.parentNode; var lla=ula.childNodes; for(var i=0;i<lla.length;i++){ if(lla[i].nodeName=='UL'){ lla[i].setAttribute("style","display:block"); } } } /*獲取當前的日期和時間 */ function tm(){ var today = new Date(); var year=today.getFullYear(); var month=today.getMonth()+1; var day=today.getDay(); var tm=year+"年"+month+"月"+day+"日"+" "+today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds(); ; var rq=document.getElementById("rq"); rq.innerHTML=tm; } </script> </head> <body onload="tm();"> <!-- 上 --> <div id="up"> <div id="up_left"> <ul> <li style="font-size:12px;">銅陵華金礦業有限責任公司</li> <li>井下綜合監管系統</li> </ul> </div> <table id="up_right"> <tr> <td class="prompt">您好！<%=request.getParameter("username") %></td> <td class="prompt">[華金礦業]:</td> <td class="prompt" id="rq"></td> </tr> <tr> <td class="prompt">密碼</td> <td class="prompt">桌面</td> <td class="prompt">登出</td> </tr> </table> </div> <div style="width:102%;height: 50px;background-color: #4891C6;position: relative;margin-top: -14px;margin-left: -7px;"></div> <!--中 --> <div id="centers"> <div id="center-left"> <input type="button" value="功能選單" class="view"> <ul id="all"> <!-- 第一個選單 --> <li class="sub-menu"> <input type="button" value="圖形展現" class="button" name="tree" id="jpg" onclick="display(this.id);"> <ul style="display: none;"> <li><a href="total_picture.jsp">實時總圖</a></li> <li><a href="role_position.jsp" >軌跡定位</a></li> </ul> </li> <!-- 第二個選單 --> <li class="sub-menu"> <input type="button" value="人員定位" class="button" name="tree" id="people" onclick="display(this.id);"> <ul style="display: none;"> <li>井下人員狀況</li> <li>LED通知管理</li> <li>LED顯示管理</li> <li>大螢幕輸出</li> <li>人員定位搜尋</li> <li>人員考勤搜尋</li> <li>排程統計</li> </ul> </li> <!-- 第三個選單 --> <li class="sub-menu"> <input type="button" value="環境監測" class="button" name="tree" id="supervise" onclick="display(this.id);"> <ul style="display: none;"> <li>環境測試總圖</li> <li>環境監測資料查詢</li> <li>環境報警資料查詢</li> </ul> </li> <!-- 第四個選單 --> <li class="sub-menu"> <input type="button" value="查詢統計" class="button" name="tree" id="select" onclick="display(this.id);"> <ul style="display: none;"> <li>人員報警查詢</li> <li>超時人員查詢</li> <li>裝置工作狀況</li> <li>裝置工作狀態查詢</li> </ul> </li> <!-- 第五個選單 --> <li class="sub-menu"> <input type="button" value="基礎資訊管理" class="button" name="tree" id="information" onclick="display(this.id);"> <ul style="display: none;"> <li>基站定義</li> <li>採集基站定義</li> <li>採集裝置定義</li> <li><a href="/Socket/Personnel_definition">人員定義</a></li> <li>工種定義</li> <li>職務定義</li> <li>帶班領導定義</li> </ul> </li> <!-- 第六個選單 --> <li class="sub-menu"> <input type="button" value="系統管理" class="button" name="tree" id="system" onclick="display(this.id)"> <ul style="display: none;"> <li>機構定義</li> <li>使用者定義</li> </ul> </li> </ul> <!--隱藏下面的具體位元組 --> </div> <div id="center-right"> <!-- 人員資訊介面--> <div id="peo_head">Led管理-LED輸出</div> <br> <table id="peo_info"> <tr><td colspan="2">Led引數</td><td>操作</td></tr> <tr style="background: white"><td colspan="2">開口大屏</td><td>輸出</td></tr> <tr><td style="width: 20%">Led顯示位置調整</td><td style="width: 40%">Led內容調整</td><td style="width: 40%">Led顯示頁面調整</td></tr> <tr style="background: white"><td>向下調整：<input type="text" class="trr"/>(畫素)</td><td>豎向：擴大<input type="text" class="trr"/>(畫素)縮小<input type="text" class="trr"/>(畫素)</td><td>豎向：擴大<input type="text" class="trr"/>(畫素)縮小<input type="text" class="trr"/>(畫素)</td></tr> <tr style="background: white"><td>向右調整：<input type="text" class="trr"/>(畫素)</td><td>橫向：擴大<input type="text" class="trr"/>(畫素)縮小<input type="text" class="trr"/>(畫素)</td><td>豎向：擴大<input type="text" class="trr"/>(畫素)縮小<input type="text" class="trr"/>(畫素)</td></tr> </table> </div> <!-- 遍歷資料庫裡面的集合--> </div> <!--下 --> <div id="bottom"> 誠信安天下-------銅陵力凡有限責任公司 </div> </body> <style> #peo_info{ background-color:#e2e7ea; width:105%; height: 168px; position: relative; margin-left: 23px; padding-left:0px; padding-top: 22px; font-size: 14px; } .trr{ width: 30px; height: 20px; } #peo_head{ width:119%; height: 40px; background-color:#8dc2e6; text-align: center; color:white; position: relative; margin-top: -2px; padding-top: 19px; } #peo_info td{ width: 15%; text-align: center; } </style> </html>