如何在jsp页面中静态插入jsp代码

最新推荐文章于 2023-05-09 16:27:05 发布

_抛锚#

最新推荐文章于 2023-05-09 16:27:05 发布

阅读量684

点赞数

分类专栏： web前端文章标签： jsp html

本文链接：https://blog.csdn.net/weixin_44949150/article/details/116075811

版权

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文档展示了如何使用JSP的include标签整合HTML页面，创建一个超市账单管理系统的用户界面。index.jsp中包含了main.jsp（头部）和left.jsp（左侧功能列表），并实现了动态显示当前时间和问候语的功能。页面布局清晰，头部包含系统名称和用户信息，左侧为功能列表，右侧显示时间及欢迎信息。JavaScript函数fn()用于实时更新时间，并根据当前小时数显示不同的问候语。

摘要由CSDN通过智能技术生成

使用include标签：<%@include file=“jsp文件路径”%>

index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>超市账单管理系统</title>
    <link rel="stylesheet" href="css/public.css"/>
    <link rel="stylesheet" href="css/style.css"/>
    <style type="text/css">
      #hours {font-size: 25px;
        font-family: Consolas, serif}
    </style>
  </head>
  <body>
  <%@include file="main.jsp"%><%--插入头部份--%>
  <!--主体内容-->
  <section class="publicMian">
    <%@include file="left.jsp"%><%--插入左部份--%>
    <div class="right">
      <img class="wColck" src="img/clock.jpg" alt=""/>
      <div class="wFont">
        <h2>Admin</h2><span id="hours"></span>
        <p>欢迎来到超市账单管理系统!</p>
      </div>
    </div>
  </section>
  <footer class="footer"></footer>
  </body>
</html>

main.jsp

<!--头部-->
<header class="publicHeader">
    <a href="index.jsp"><h1>超市账单管理系统</h1></a>
    <div class="publicHeaderR">
        <p><span style="color: #fff21b"> Admin</span> , 欢迎你！</p>
        <a href="login.html">退出</a>
    </div>
</header>
<!--时间-->
<section class="publicTime">
    <span id="time">2021年04月23日 17:00:00  星期五</span>
    <a href="#">温馨提示：为了能正常浏览，请使用高版本浏览器！（IE10+）</a>
    <script>
        window.onload = function() {
            setInterval(fn,1000);
        };
        //时间函数
        function fn(){
            var time = new Date();
            var str= "";
            var div = document.getElementById("time");
            var hour = document.getElementById("hours");
            //console.log(time);
            var year = time.getFullYear();
            var mon = time.getMonth()+1;
            var day = time.getDate();
            var h = time.getHours();
            var m = time.getMinutes();
            var s = time.getSeconds();
            var week = time.getDay();
            switch (week){
                case 0:week="日";
                    break;
                case 1:week="一";
                    break;
                case 2:week="二";
                    break;
                case 3:week="三";
                    break;
                case 4:week="四";
                    break;
                case 5:week="五";
                    break;
                case 6:week="六";
                    break;
            }
            str = year +"年"+totwo(mon)+"月"+totwo(day)+"日"+"&nbsp;"+totwo(h)+":"+totwo(m)+":"+totwo(s)+"&nbsp;"+"星期"+week;
            div.innerHTML = str;
            if(h < 6){
                hour.innerHTML = "凌晨好!!!";
            } else if(h < 12){
                hour.innerHTML = "上午好!!!";
            } else if(h < 15){
                hour.innerHTML = "中午好!!!";
            } else if(h < 18){
                hour.innerHTML = "下午好!!!";
            } else if(h < 21){
                hour.innerHTML = "傍晚好!!!";
            } else {
                hour.innerHTML = "深夜好!!!";
            }
        }
        function totwo(n){
            if(n<=9){
                return n = "0"+n;
            }
            else{
                return n =""+n;
            }
        }
    </script>
</section>

left.jsp

<%--主体内容左侧--%>
<div class="left">
    <h2 class="leftH2"><span class="span1"></span>功能列表 <span></span></h2>
    <nav>
        <ul class="list">
            <li><a href="billList.html">账单管理</a></li>
            <li><a href="providerList.html">供应商管理</a></li>
            <li><a href="userListServlet">用户管理</a></li>
            <li><a href="password.html">密码修改</a></li>
            <li><a href="login.html">退出系统</a></li>
        </ul>
    </nav>
</div>