js实现月历

实现月历的 JavaScript 方法

使用 JavaScript 实现月历需要结合日期处理和 DOM 操作。以下是一个完整的实现方案：

获取当前月份信息

const date = new Date();
const currentYear = date.getFullYear();
const currentMonth = date.getMonth();

生成月历标题

const monthNames = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];
document.getElementById('month-title').textContent = `${currentYear}年 ${monthNames[currentMonth]}`;

计算月份天数

function getDaysInMonth(year, month) {
    return new Date(year, month + 1, 0).getDate();
}
const daysInMonth = getDaysInMonth(currentYear, currentMonth);

获取月份第一天是星期几

const firstDay = new Date(currentYear, currentMonth, 1).getDay();

生成月历表格

const calendarBody = document.getElementById('calendar-body');
let dateCell = 1;

for (let i = 0; i < 6; i++) {
    const row = document.createElement('tr');

    for (let j = 0; j < 7; j++) {
        const cell = document.createElement('td');

        if (i === 0 && j < firstDay) {
            // 上个月的最后几天
            cell.textContent = '';
        } else if (dateCell > daysInMonth) {
            // 下个月的前几天
            cell.textContent = '';
        } else {
            cell.textContent = dateCell;
            if (dateCell === new Date().getDate() && currentMonth === new Date().getMonth()) {
                cell.classList.add('today');
            }
            dateCell++;
        }

        row.appendChild(cell);
    }

    calendarBody.appendChild(row);
}

完整 HTML 结构

<div class="calendar">
    <h2 id="month-title"></h2>
    <table>
        <thead>
            <tr>
                <th>日</th>
                <th>一</th>
                <th>二</th>
                <th>三</th>
                <th>四</th>
                <th>五</th>
                <th>六</th>
            </tr>
        </thead>
        <tbody id="calendar-body"></tbody>
    </table>
</div>

添加样式

.calendar {
    width: 300px;
    font-family: Arial, sans-serif;
}

.calendar table {
    width: 100%;
    border-collapse: collapse;
}

.calendar th, .calendar td {
    padding: 10px;
    text-align: center;
    border: 1px solid #ddd;
}

.calendar th {
    background-color: #f2f2f2;
}

.calendar .today {
    background-color: #4CAF50;
    color: white;
}

添加月份切换功能

document.getElementById('prev-month').addEventListener('click', () => {
    currentMonth--;
    if (currentMonth < 0) {
        currentMonth = 11;
        currentYear--;
    }
    renderCalendar();
});

document.getElementById('next-month').addEventListener('click', () => {
    currentMonth++;
    if (currentMonth > 11) {
        currentMonth = 0;
        currentYear++;
    }
    renderCalendar();
});

function renderCalendar() {
    // 清空现有日历
    document.getElementById('calendar-body').innerHTML = '';
    document.getElementById('month-title').textContent = `${currentYear}年 ${monthNames[currentMonth]}`;

    // 重新渲染日历
    const daysInMonth = getDaysInMonth(currentYear, currentMonth);
    const firstDay = new Date(currentYear, currentMonth, 1).getDay();

    let dateCell = 1;
    for (let i = 0; i < 6; i++) {
        const row = document.createElement('tr');

        for (let j = 0; j < 7; j++) {
            const cell = document.createElement('td');

            if (i === 0 && j < firstDay) {
                cell.textContent = '';
            } else if (dateCell > daysInMonth) {
                cell.textContent = '';
            } else {
                cell.textContent = dateCell;
                if (dateCell === new Date().getDate() && currentMonth === new Date().getMonth() && currentYear === new Date().getFullYear()) {
                    cell.classList.add('today');
                }
                dateCell++;
            }

            row.appendChild(cell);
        }

        calendarBody.appendChild(row);
    }
}

这个实现包含了完整的月历功能，包括：

• 显示当前月份的日历
• 高亮显示当天日期
• 支持前后月份切换
• 响应式布局设计

可以根据需要进一步扩展功能，如添加事件提醒、节假日标记等。