2024/04/03

学习时长：2小时

代码行数：177行

博客总数：1篇

由于开始使用的vue制作的结对作业前端页面的使用上，我和小伙伴的使用技术不一样，所以今日和小伙伴重新完成了结对作业的页面设计，并且学习了解了vue的rule的规则设定，可以完成前端对输入的要求设定。

复制代码
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地铁线路查询系统</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<style>body{background-image: linear-gradient(to bottom right, rgb(250, 243, 108), rgb(10, 122, 250));}</style>
<script>
    function changePage(pagename) {
        var i, page;
        page = document.getElementsByClassName("page");
        for (i = 0; i < page.length; i++) {
            page[i].style.display = "none";
        }
        document.getElementById(pagename).style.display = "block";
    }



</script>

<div class="navbar">
    <a href="#"
       onclick="changePage('trans')">换乘查询</a>
    <a href="#"
       onclick="changePage('line')">线路查询</a>
    <a href="#"
       onclick="changePage('station')">站点查询</a>
</div>

<div id="trans" class="page" style="display: block">
    <h1>地铁换乘查询</h1>
    <form method="post" action="function1">
        <label>
            出发地&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" placeholder="出发地" value="${start}" name="startplace">
        </label>
        <br>
        <br>
        <label>
            目的地&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" placeholder="目的地" value="${end}" name="endplace">
        </label>
        <br>
        <span id="message" style="font-size: 12px;color:red">${message}</span><br>
        <br>
        <button type="submit" >查询</button>
        <br>
        <table style="margin-top: 40px;margin-left:auto;margin-right:auto;" width="50%">
            <tr>
                <td>
                    <span id="result" style="font-size: 30px;color:black">${result}</span>
                </td>
            </tr>
        </table>
        <br>
    </form>
</div>

<div id="line" class="page">
    <h1>地铁线路查询</h1>
        <label>
            线路名称&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="line2" value="${linename}" placeholder="线路名称,例如：1号线" name="linename">
        </label>
        <br>
        <span id="message1" style="font-size: 12px;color:red">${message1}</span><br>
        <br>
        <button id="line111">查询</button>
        <br>
        <table style="margin-top: 40px;margin-left:auto;margin-right:auto;" width="50%">
            <tr>
                <td>
                    <span id="passStation" style="font-size: 30px;color:black">${passStation}</span>
                </td>
            </tr>
        </table>
</div>

<div id="station" class="page">
    <h1>地铁站点查询</h1>
        <label>
            站点名称&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="sta2" placeholder="站点名称" value="${placename}" name="placename">
        </label>
        <br>
        <br>
        <button id="sta111">查询</button>
        <br>
        <table style="margin-top: 40px;margin-left:auto;margin-right:auto;" width="50%">
            <tr>
                <td>
                    <span id="StationInformation" style="font-size: 30px;color:black">${StationInformation}</span>
                </td>
            </tr>
            <tr>
                <td>
                    <span id="lastStation" style="font-size: 30px;color:black">${lastStation}</span>
                </td>
            </tr>
            <tr>
                <td>
                    <span id="nextStation" style="font-size: 30px;color:black">${nextStation}</span>
                </td>
            </tr>
        </table>
</div>

</body>
</html>
复制代码

 

posted @ 2024-04-03 09:10  Snor9  阅读(11)  评论(0)    收藏  举报