随着互联网的普及，网页上的日期显示功能变得越来越重要。这不仅有助于用户了解当前日期，还能通过显示节假日详情来增强用户体验。jQuery作为一个强大的JavaScript库，能够轻松实现这一功能。本文将详细介绍如何使用jQuery来展示日期，并突出显示节假日信息。

1. 基础知识

在开始之前，我们需要了解一些基础知识：

  • jQuery库：确保你的项目中已经包含了jQuery库。
  • 日期格式：确定你想要展示的日期格式，例如“YYYY-MM-DD”或“DD/MM/YYYY”。
  • 节假日数据：准备好节假日数据，包括日期和名称。

2. 创建HTML结构

首先，我们需要创建一个简单的HTML结构来展示日期和节假日信息。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日期显示与节假日详情</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        /* 样式可以根据需求进行修改 */
        #dateDisplay {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 20px;
        }
        .holiday {
            color: red;
        }
    </style>
</head>
<body>
    <div id="dateDisplay"></div>
    <script src="script.js"></script>
</body>
</html>

3. 编写JavaScript代码

接下来，我们使用jQuery来获取当前日期，并在页面上显示它。同时，我们还需要一个函数来检查并突出显示节假日。

$(document).ready(function() {
    function displayDate() {
        var now = new Date();
        var year = now.getFullYear();
        var month = now.getMonth() + 1; // 月份是从0开始的
        var day = now.getDate();
        var hours = now.getHours();
        var minutes = now.getMinutes();
        var seconds = now.getSeconds();
        month = month < 10 ? '0' + month : month;
        day = day < 10 ? '0' + day : day;
        hours = hours < 10 ? '0' + hours : hours;
        minutes = minutes < 10 ? '0' + minutes : minutes;
        seconds = seconds < 10 ? '0' + seconds : seconds;
        var formattedDate = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
        $('#dateDisplay').text(formattedDate);
        
        // 检查并突出显示节假日
        checkHoliday(formattedDate);
    }

    function checkHoliday(date) {
        var holidays = [
            {date: '2023-01-01', name: 'New Year\'s Day'},
            {date: '2023-12-25', name: 'Christmas Day'}
            // 添加更多节假日
        ];
        holidays.forEach(function(holiday) {
            if (date === holiday.date) {
                $('#dateDisplay').append('<div class="holiday"> (' + holiday.name + ') </div>');
            }
        });
    }

    // 每秒更新日期
    setInterval(displayDate, 1000);
});

4. 总结

通过上述步骤，我们使用jQuery创建了一个简单的日期显示功能，并能够突出显示节假日信息。你可以根据自己的需求修改代码，例如添加更多的节假日或改变日期格式。使用jQuery可以让这个过程变得非常简单和高效。