答案：该日历组件通过原生JavaScript实现，包含年月切换、当月日期生成及跨年处理。结构上分为头部按钮、标题和主体表格，支持动态渲染并补全首尾空白单元格，结合CSS美化样式，可嵌入网页展示当前月份日期，逻辑清晰且便于扩展功能。
实现一个简单的日历组件，可以展示当前月份的日期，并支持切换年份和月份。这个组件使用原生 JavaScript 编写，不依赖任何框架或库，适合嵌入到网页中作为基础 UI 功能。
1. 基本结构设计
日历组件包含三个主要部分：头部（用于显示当前年月和切换按钮）、主体（以表格形式展示日期）、以及简单的样式美化。
HTML 结构如下：
<div id="calendar">
<div class="calendar-header">
<button id="prev-month"><</button>
<h2 id="current-month-year"></h2>
<button id="next-month">></button>
</div>
<table class="calendar-body">
<thead>
<tr>
<th>日</th>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
<th>六</th>
</tr>
</thead>
<tbody id="calendar-dates"></tbody>
</table>
</div>
2. JavaScript 核心逻辑
通过 JavaScript 控制当前显示的年月，生成对应月份的日期格子，并响应用户点击切换月份。
立即学习“Java免费学习笔记（深入）”；
关键步骤包括：
- 获取当前日期，初始化年份和月份
- 根据年月生成该月的第一天是星期几，补全前一个月的末尾日期
- 计算并填充当月所有日期
- 绑定前后月份按钮事件
function createCalendar(year, month) {
const date = new Date(year, month);
const firstDay = new Date(year, month, 1).getDay(); // 星期几 (0-6)
const daysInMonth = new Date(year, month + 1, 0).getDate(); // 当月天数
const tbody = document.getElementById('calendar-dates');
tbody.innerHTML = ''; // 清空原有内容
let row = document.createElement('tr');
let currentDate = 1;
// 填充第一行空白（上个月末尾）
for (let i = 0; i < firstDay; i++) {
const cell = document.createElement('td');
row.appendChild(cell);
}
// 填充当月日期
while (currentDate <= daysInMonth) {
if (row.children.length === 7) {
tbody.appendChild(row);
row = document.createElement('tr');
}
const cell = document.createElement('td');
cell.textContent = currentDate;
// 高亮今天
const today = new Date();
if (year === today.getFullYear() && month === today.getMonth() && currentDate === today.getDate()) {
cell.style.backgroundColor = '#4CAF50';
cell.style.color = 'white';
}
row.appendChild(cell);
currentDate++;
}
// 补齐最后一行
while (row.children.length < 7) {
const cell = document.createElement('td');
row.appendChild(cell);
}
tbody.appendChild(row);
// 更新标题
const monthNames = ['一月', '二月', '三月', '四月', '五月', '六月',
'七月', '八月', '九月', '十月', '十一月', '十二月'];
document.getElementById('current-month-year').textContent = `${year}年 ${monthNames[month]}`
}
// 切换控制
let currentYear = new Date().getFullYear();
let currentMonth = new Date().getMonth();
document.getElementById('prev-month').addEventListener('click', () => {
currentMonth--;
if (currentMonth < 0) {
currentMonth = 11;
currentYear--;
}
createCalendar(currentYear, currentMonth);
});
document.getElementById('next-month').addEventListener('click', () => {
currentMonth++;
if (currentMonth > 11) {
currentMonth = 0;
currentYear++;
}
createCalendar(currentYear, currentMonth);
});
// 初始化日历
createCalendar(currentYear, currentMonth);
3. 添加基础样式
为了让日历看起来更清晰，添加一些简单的 CSS 样式：
#calendar {
width: 300px;
margin: 20px auto;
font-family: Arial, sans-serif;
}
.calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.calendar-header h2 {
margin: 0;
font-size: 1.2em;
}
.calendar-body {
width: 100%;
border-collapse: collapse;
text-align: center;
}
.calendar-body th,
.calendar-body td {
border: 1px solid #ddd;
padding: 8px;
height: 40px;
}
.calendar-body th {
background-color: #f4f4f4;
}
4. 使用方式
将上述 HTML、JavaScript 和 CSS 整合到页面中即可运行。你也可以将其封装成一个函数或类，便于复用。
例如封装为一个可调用函数：
function initCalendar(containerId, year, month) {
// 将日历插入指定容器
const container = document.getElementById(containerId);
// 此处可动态生成 HTML 或要求页面已有结构
createCalendar(year || new Date().getFullYear(), month || new Date().getMonth());
}
基本上就这些。这个日历组件轻量、易懂，适合学习或在小型项目中使用。你可以进一步扩展功能，比如点击日期回调、标记事件、多语言支持等。不复杂但容易忽略细节，比如跨年处理和月末补全。
