用jquery写一个万年历

封面图 • 2025-12-22 • jQuery

用 jQuery 实现一个简单的“万年历”（即可以显示当前月份的日历，并支持切换月份），是一个常见的前端练习项目。下面我将提供一个完整的 HTML + jQuery 示例，实现一个基本的万年历功能。

---

## ✅ 功能说明

- 显示当前月的日历
- 可以点击“上一月”、“下一月”按钮切换月份
- 每天显示为一个格子，包括日期和星期

---

## 📄 完整代码示例

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery 万年历</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 20px;
        }

#calendar {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 5px;
            margin-top: 20px;
        }

.day {
            border: 1px solid #ccc;
            padding: 10px;
            background-color: #f9f9f9;
        }

.day-header {
            font-weight: bold;
            background-color: #e0e0e0;
        }

#controls {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>

function renderCalendar(date) {
        const year = date.getFullYear();
        const month = date.getMonth();

// 设置标题
        $('#month-year').text(`${year} 年 ${month + 1} 月`);

// 清空日历
        $('#calendar').empty();

// 获取当月第一天是星期几（0=周日，1=周一...）
        const firstDay = new Date(year, month, 1).getDay();
        // 获取当月最后一天
        const lastDay = new Date(year, month + 1, 0).getDate();

// 填充星期标题
        const daysOfWeek = ['日', '一', '二', '三', '四', '五', '六'];
        daysOfWeek.forEach(day => {
            $('#calendar').append(`<div class="day-header">${day}</div>`);
        });

// 填充空白格子（前面的空格）
        for (let i = 0; i < firstDay; i++) {
            $('#calendar').append('<div class="day"></div>');
        }

// 填充日期
        for (let day = 1; day <= lastDay; day++) {
            $('#calendar').append(`<div class="day">${day}</div>`);
        }
    }

// 初始化渲染
    renderCalendar(currentDate);

// 上一月
    $('#prev-month').click(() => {
        currentDate.setMonth(currentDate.getMonth() - 1);
        renderCalendar(currentDate);
    });

// 下一月
    $('#next-month').click(() => {
        currentDate.setMonth(currentDate.getMonth() + 1);
        renderCalendar(currentDate);
    });
</script>

</body>
</html>
```

---

## 🧠 说明

- 使用 `grid` 布局来创建 7 列的表格。
- `firstDay` 表示本月第一天是星期几，用于在日历中填充空白格子。
- `lastDay` 表示本月最后一天的日期。
- 通过 jQuery 的 `.click()` 方法绑定按钮事件，实现月份切换。

---

## ✅ 扩展建议

你可以进一步扩展这个万年历：

- 添加今天高亮
- 支持点击某天弹出提示
- 与后端结合，展示节假日或事件
- 增加年份选择器

如果你需要这些高级功能，我可以继续帮你实现！

是否需要我为你添加更多功能？😊