<%--
  Created by IntelliJ IDEA.
  User: user
  Date: 2020/2/21
  Time: 10:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!-- 声明该JSP页面的内容类型为text/html（即HTML格式），字符编码采用UTF-8，表明页面将以HTML格式展示并且在服务器端使用Java语言编写相关逻辑 -->

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!-- 引入JSTL（JavaServer Pages Standard Tag Library）的核心标签库，设置前缀为“c”，方便后续在JSP页面中使用其提供的各种标签进行如条件判断、循环遍历等操作 -->

<html>
<head>
    <!-- 设置页面的字符编码为utf-8，确保浏览器能正确解析并显示页面中的各种字符，防止出现乱码现象 -->
    <meta charset="utf-8">
    <!-- 设置页面渲染所使用的引擎为webkit，让页面在支持webkit的浏览器中按照该引擎的规则进行渲染，有助于呈现出期望的页面样式和交互效果 -->
    <meta name="renderer" content="webkit">
    <!-- 声明页面在IE浏览器中的兼容模式，使页面在IE浏览器中以其最高可用版本的模式来渲染，如果安装了Chrome Frame插件，则优先使用该插件进行渲染，以此增强页面在IE浏览器中的兼容性和显示效果 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- 设置页面的视口（viewport）属性，width=device-width表示页面宽度跟随设备宽度自适应，initial-scale=1设置初始缩放比例为1，
    maximum-scale=1限制最大缩放比例为1，用于确保页面在移动设备等不同屏幕尺寸下能有合适的展示效果 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Title</title>
    <!-- 引入layui框架的CSS样式表，路径通过EL表达式结合pageContext对象获取项目相对路径，用于为页面应用layui框架提供的各种样式，构建页面的外观布局 -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/lib/layui/css/layui.css">
    <!-- 引入layui框架中layer模块的默认CSS样式表，用于为layer弹出层等相关组件设置特定的样式，使其展示效果符合预期 -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/lib/layui/css/modules/layer/default/layer.css">
    <!-- 引入jQuery库，其路径通过EL表达式结合pageContext获取项目相对路径，jQuery是常用的JavaScript库，方便在页面中操作DOM元素、处理页面事件、发起AJAX异步请求等操作 -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.1.1.js"></script>
</head>
<body>
<!-- 创建一个fieldset（字段集）元素，应用layui的相关样式类layui-elem-field和layui-field-title，用于对页面中的相关内容进行分组和标题显示，
设置了顶部外边距为30px，使其在页面中有一定的间距，看起来更美观 -->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <!-- 在字段集中创建一个legend（图例）元素，用于显示该组内容的标题，这里显示的标题是“访客时间线” -->
    <legend>访客时间线</legend>
</fieldset>
<!-- 创建一个无序列表（ul）元素，应用layui的时间线样式类layui-timeline，用于以时间线的形式展示访客相关的信息 -->
<ul class="layui-timeline">
    <!-- 创建一个列表项（li）元素，作为时间线中的一个节点，应用layui的时间线项目样式类layui-timeline-item -->
    <li class="layui-timeline-item">
        <!-- 创建一个图标（i）元素，应用layui的图标样式类layui-icon以及时间轴样式类layui-timeline-axis，显示特定的图标（这里图标对应的字符编码为“”，具体图标样式由layui框架定义），用于表示时间线的节点标记 -->
        <i class="layui-icon layui-timeline-axis"></i>
        <!-- 创建一个div元素，用于包裹时间线节点的具体内容，应用layui的文本样式类layui-text，使内部文本能按照layui框架的默认文本样式显示 -->
        <div class="layui-timeline-content layui-text">
            <!-- 创建一个标题（h3）元素，应用layui的时间线标题样式类layui-timeline-title，并设置了id为“mytime”，用于后续通过JavaScript操作来动态更新显示的时间内容 -->
            <h3 class="layui-timeline-title" id="mytime"></h3>
            <p>
                <!-- 显示访客日志的统计信息，先是显示“访客日志共计：”字样，然后通过EL表达式展示pageInfo对象中total属性的值（通常表示总日志条数），接着显示“条”以及其他相关的日志显示数量等信息，
                例如当前显示的条数（通过pageInfo对象的size属性获取），用于让用户对访客日志的整体情况和当前展示情况有清晰的了解 -->
                访客日志共计：&nbsp;${pageInfo.total}&nbsp;条&emsp;当前显示：${pageInfo.size}&nbsp;条&emsp;&emsp;
                <!-- 通过JSTL的if条件判断标签，判断pageInfo对象中的pageNum属性（通常表示当前页码）是否大于1，如果大于1则表示不是第一页，执行标签内的代码，显示“上一页”的链接 -->
                <c:if test="${pageInfo.pageNum > 1}">
                    <!-- 创建一个超链接（a）元素，href属性通过EL表达式拼接出具体的URL路径，用于跳转到上一页（当前页码减1），每页显示10条数据（size=10），链接显示的文本为“上一页”，方便用户进行翻页操作 -->
                    <a href="${pageContext.request.contextPath}/visitor/log?page=${pageInfo.pageNum - 1}&size=10">上一页</a>&emsp;&emsp;
                </c:if>
                <!-- 通过JSTL的if条件判断标签，判断pageInfo对象中的pageNum属性是否小于总页数（pageInfo.pages），如果小于总页数则表示不是最后一页，执行标签内的代码，显示“下一页”的链接 -->
                <c:if test="${pageInfo.pageNum < pageInfo.pages}">
                    <!-- 创建一个超链接（a）元素，href属性通过EL表达式拼接出具体的URL路径，用于跳转到下一页（当前页码加1），每页显示10条数据（size=10），链接显示的文本为“下一页”，方便用户进行翻页操作 -->
                    <a href="${pageContext.request.contextPath}/visitor/log?page=${pageInfo.pageNum + 1}&size=10">下一页</a>
                </c:if>
            </p>
            <ul>
                <!-- 使用JSTL的forEach循环标签，开始循环遍历pageInfo.list中的数据（通常是分页后的访客日志列表集合），每次循环将当前元素赋值给log变量，方便在列表中展示各个访客日志的详细信息 -->
                <c:forEach items="${pageInfo.list}" var="log">
                    <!-- 通过JSTL的if条件判断标签，判断访客日志对象（log）中的end_date属性是否为空字符串，如果为空字符串则表示访客尚未离开，执行标签内的代码，显示相应的访客日志信息 -->
                    <c:if test="${log.end_date == ''}">
                        <!-- 创建一个列表项（li）元素，用于展示访客的具体日志信息，按照指定格式显示访客姓名、访问时间、访问地点、访问事因以及尚未离开的提示信息 -->
                        <li>【${log.name}】于&nbsp;${log.begin_date}&nbsp;访问了${log.place}，事因${log.visit_result}，目前尚未离开</li>
                    </c:if>
                    <!-- 通过JSTL的if条件判断标签，判断访客日志对象（log）中的end_date属性是否不为空字符串，如果不为空字符串则表示访客已经离开，执行标签内的代码，显示相应的访客日志信息 -->
                    <c:if test="${log.end_date!= ''}">
                        <!-- 创建一个列表项（li）元素，用于展示访客的具体日志信息，按照指定格式显示访客姓名、访问时间、访问地点、访问事因以及离开时间等信息 -->
                        <li>【${log.name}】于&nbsp;${log.begin_date}&nbsp;访问了${log.place}，事因${log.visit_result}，并与${log.end_date}离开</li>
                    </c:if>
                </c:forEach>
            </ul>
        </div>
    </li>
    <!-- 创建另一个列表项（li）元素，作为时间线中的另一个节点，同样应用layui的时间线项目样式类layui-timeline-item -->
    <li class="layui-timeline-item">
        <!-- 创建一个图标（i）元素，应用layui的图标样式类layui-icon以及时间轴样式类layui-timeline-axis，显示特定的图标（这里图标对应的字符编码为“”，具体图标样式由layui框架定义），用于表示时间线的节点标记 -->
        <i class="layui-icon layui-timeline-axis"></i>
        <!-- 创建一个div元素，用于包裹时间线节点的具体内容，应用layui的文本样式类layui-text，使内部文本能按照layui框架的默认文本样式显示 -->
        <div class="layui-timeline-content layui-text">
            <!-- 创建一个标题（div）元素，应用layui的时间线标题样式类layui-timeline-title，显示固定的文本“2020.02.21日志开启”，用于标记日志开始的时间点等相关信息 -->
            <div class="layui-timeline-title">2020.02.21日志开启</div>
        </div>
    </li>
</ul>
<script>
    function showTime(){
        // 创建一个Date对象，用于获取当前的日期和时间信息
        var nowtime =new Date();
        // 通过Date对象的getFullYear方法获取当前的年份信息
        var year=nowtime.getFullYear();
        // 通过Date对象的getMonth方法获取当前的月份信息（注意：返回值是0 - 11，所以需要加1才是实际的月份）
        var month=nowtime.getMonth()+1;
        // 通过Date对象的getDate方法获取当前的日期信息（即一个月中的第几天）
        var date=nowtime.getDate();
        // 通过JavaScript的DOM操作，获取id为“mytime”的元素（对应页面中的h3标题元素），并设置其内部文本内容为按照指定格式拼接的当前日期信息，
        // 用于在页面上动态显示当前的时间（年、月、日）
        document.getElementById("mytime").innerText=year+"年"+month+"日"+date+"日";
    }
    // 使用JavaScript的setInterval函数，每隔一段时间（这里是1000 * 60毫秒，即60秒）执行一次传入的函数（这里是showTime函数），
    // 实现每隔60秒更新一次页面上显示的时间（通过调用showTime函数来更新id为“mytime”的元素显示的日期内容）
    setInterval("showTime()",1000*60);

</script>
</body>
</html>