2024.4.2
所学时间：3小时
代码行数：123
博客园数：1篇
所学知识：今天我与张雨锟完成了一部分的前端页面的撰写，我负责测试，他负责写前端页面，他通过写js文件和jsp文件做出了基本的盒子模型，完成了页面的大致走向。通过我的测试，完成了前端页面盒子的创建，可以在一个页面内呈现出西线路查询，路线查询，站点查询等。
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="wide=device-width,initial-scale=1.0">
<link rel="stylesheet" href="navber.css">
</head>
<body >
<div class="navber">
<a href="#" onclick="open1('换乘查询')">换乘查询</a>
<a href="#" onclick="open1('线路查询')">线路查询</a>
<a href="#" onclick="open1('站点查询')">站点查询</a>
</div>
<div id="换乘查询" class="page" style="display: block " >
<h1 style="text-align: center">换乘查询</h1>
<form action="<%=request.getContextPath()%>/NM-servlet" style="text-align: center">
出发地
<input type="text" name="start" style="height: 25px">
<br>
<br>
目的地
<input type="text" name="end" style="height: 25px">
<br>
<br>
<button type="submit" style="text-align:center;width:70px;height: 40px;border-radius: 5px;border: aqua" >查询</button>
</form>
</div>
<div id="线路查询" class="page">
<h1 style="text-align: center">线路查询</h1>
<form action="<%=request.getContextPath()%>/LQ-servlet" style="text-align: center">
线路名称
<select name="line" style="text-align: center;height: 30px;width: 80px;border-radius: 5px">
<option value="1">1号线</option>
<option value="2">2号线</option>
<option value="4">4号线</option>
<option value="5">5号线</option>
<option value="6">6号线</option>
<option value="7">7号线</option>
<option value="8">8号线</option>
<option value="9">9号线</option>
<option value="10">10号线</option>
<option value="13">13号线</option>
<option value="14">14号线</option>
<option value="15">15号线</option>
</select>
<br>
<br>
<button type="submit" style="text-align: center;width:70px;height: 40px;border-radius: 5px;border: aqua" >查询</button>
</form>
</div>
<div id="站点查询" class="page">
<h1 style="text-align: center">站点查询</h1>
<form action="<%=request.getContextPath()%>/SQ-servlet" style="text-align: center">
站点名称
<input type="text" name="station" style="height: 25px">
<br>
<br>
<button type="submit" style="text-align: center;width:70px;height: 40px;border-radius: 5px;border: aqua" >查询</button>
</form>
</div>
<script>
function open1(pagename){
var i,pages;
pages=document.getElementsByClassName("page");
for(i=0;i<pages.length;i++){
pages[i].style.display="none";
}
document.getElementById(pagename).style.display="block";
}
</script>
</body>
</html>
