jsp教程之如何复原一个页面

我现在要做的是复原以下的页面
在这里插入图片描述
右侧的手风琴菜单我再之前的博文里面已经详细介绍了；
我们现在主要看的是中间的led管理的部分：
主要用表格
来完成
实际完成图如下：（10分钟之内完成的）
在这里插入图片描述
代码如下：
<%@ 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>
jsp教程之如何复原一个页面

猜你喜欢
