用jquery写一个万年历

封面图 • 2023-10-12 • jQuery

用jquery写一个万年历

实现一个完整的万年历是一个相对复杂的任务，但我可以给你提供一个简化版的示例，包含基本的月份切换和日期显示。在这个示例中，我将使用HTML和jQuery来创建一个简单的静态万年历。

html
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简化版万年历</title>
    <style>
        #calendar {
            font-family: Arial, sans-serif;
            max-width: 400px;
            margin: auto;
            text-align: center;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }
        th, td {
            padding: 10px;
            border: 1px solid #ddd;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>

</body>
</html>
```

然后，创建一个名为 calendar.js 的 JavaScript 文件，包含以下代码：

javascript
```
$(document).ready(function () {
    // 获取当前日期
    var currentDate = new Date();

// 初始化日历
    function initializeCalendar(year, month) {
        var calendarHtml = '<h2>' + year + '年 ' + (month + 1) + '月</h2>';
        calendarHtml += '<table>';
        calendarHtml += '<thead><tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr></thead>';
        calendarHtml += '<tbody>';

// 获取当月的第一天
        var firstDay = new Date(year, month, 1);
        var startingDay = firstDay.getDay();

// 获取当月的最后一天
        var lastDay = new Date(year, month + 1, 0);
        var totalDays = lastDay.getDate();

// 填充日历表格
        var day = 1;
        for (var i = 0; i < 6; i++) {
            calendarHtml += '<tr>';
            for (var j = 0; j < 7; j++) {
                if (i === 0 && j < startingDay) {
                    calendarHtml += '<td></td>';
                } else if (day > totalDays) {
                    break;
                } else {
                    calendarHtml += '<td>' + day + '</td>';
                    day++;
                }
            }
            calendarHtml += '</tr>';
        }

calendarHtml += '</tbody>';
        calendarHtml += '</table>';

$('#calendar').html(calendarHtml);
    }

// 初始化当前月份的日历
    initializeCalendar(currentDate.getFullYear(), currentDate.getMonth());

// 处理下一个月按钮的点击事件
    $('#calendar').on('click', '#nextMonth', function () {
        currentDate.setMonth(currentDate.getMonth() + 1);
        initializeCalendar(currentDate.getFullYear(), currentDate.getMonth());
    });

// 处理上一个月按钮的点击事件
    $('#calendar').on('click', '#prevMonth', function () {
        currentDate.setMonth(currentDate.getMonth() - 1);
        initializeCalendar(currentDate.getFullYear(), currentDate.getMonth());
    });
});
```
这个简化版的万年历包含了基本的月份切换功能。你可以根据需要扩展这个示例，添加更多功能，如节假日显示、点击日期弹出详细信息等。