js怎么创建日历表格

JS怎么创建日历表格

使用JavaScript创建日历表格的核心步骤包括：创建HTML表格元素、计算每个月的天数、动态生成日期单元格、处理日期格式和样式。 其中，最为关键的一步是动态生成日期单元格，这一步决定了日历表格是否能够正确显示每个月的日期。我们将详细介绍如何通过JavaScript代码来实现这一功能。

一、创建HTML表格元素

在创建日历表格之前，我们首先需要有一个HTML结构来容纳表格。使用HTML表格元素是最直接的方式。以下是一个简单的HTML模板：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calendar</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #000;
            text-align: center;
            padding: 10px;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <table id="calendar">
        <thead>
            <tr>
                <th>Sun</th>
                <th>Mon</th>
                <th>Tue</th>
                <th>Wed</th>
                <th>Thu</th>
                <th>Fri</th>
                <th>Sat</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <script src="calendar.js"></script>
</body>
</html>

二、计算每个月的天数

为了生成日历，我们需要先计算出每个月有多少天。通过JavaScript的Date对象，可以轻松实现这一点。

function daysInMonth(month, year) {
    return new Date(year, month + 1, 0).getDate();
}

这个函数接收月份和年份作为参数，并返回对应月份的天数。

三、动态生成日期单元格

生成日期单元格是创建日历表格的核心步骤。我们需要通过JavaScript动态生成这些单元格并插入到表格中。

function generateCalendar(month, year) {
    const calendarBody = document.querySelector("#calendar tbody");
    calendarBody.innerHTML = ""; // 清空之前的内容
    const firstDay = new Date(year, month).getDay();
    const totalDays = daysInMonth(month, year);
    let date = 1;
    for (let i = 0; i < 6; i++) { // 6行
        const row = document.createElement("tr");
        for (let j = 0; j < 7; j++) { // 7列
            const cell = document.createElement("td");
            if (i === 0 && j < firstDay) {
                cell.textContent = "";
            } else if (date > totalDays) {
                break;
            } else {
                cell.textContent = date;
                date++;
            }
            row.appendChild(cell);
        }
        calendarBody.appendChild(row);
        if (date > totalDays) {
            break;
        }
    }
}
const currentDate = new Date();
generateCalendar(currentDate.getMonth(), currentDate.getFullYear());

四、处理日期格式和样式

为了使日历更加美观和实用，我们可以添加更多的样式和功能，比如高亮当前日期、添加点击事件等。

function highlightToday() {
    const today = new Date();
    const cells = document.querySelectorAll("#calendar td");
    cells.forEach(cell => {
        if (cell.textContent == today.getDate() && today.getMonth() === currentDate.getMonth() && today.getFullYear() === currentDate.getFullYear()) {
            cell.style.backgroundColor = "#ff0";
        }
    });
}
highlightToday();

五、添加导航功能

为了让用户能够查看不同月份的日历，我们可以添加上一月和下一月的导航按钮。

<button id="prevMonth">Previous Month</button>
<button id="nextMonth">Next Month</button>

document.getElementById("prevMonth").addEventListener("click", () => {
    currentDate.setMonth(currentDate.getMonth() - 1);
    generateCalendar(currentDate.getMonth(), currentDate.getFullYear());
    highlightToday();
});
document.getElementById("nextMonth").addEventListener("click", () => {
    currentDate.setMonth(currentDate.getMonth() + 1);
    generateCalendar(currentDate.getMonth(), currentDate.getFullYear());
    highlightToday();
});

六、综合应用

通过以上步骤，我们已经创建了一个基本的日历表格。以下是完整的JavaScript代码整合：

function daysInMonth(month, year) {
    return new Date(year, month + 1, 0).getDate();
}
function generateCalendar(month, year) {
    const calendarBody = document.querySelector("#calendar tbody");
    calendarBody.innerHTML = ""; // 清空之前的内容
    const firstDay = new Date(year, month).getDay();
    const totalDays = daysInMonth(month, year);
    let date = 1;
    for (let i = 0; i < 6; i++) { // 6行
        const row = document.createElement("tr");
        for (let j = 0; j < 7; j++) { // 7列
            const cell = document.createElement("td");
            if (i === 0 && j < firstDay) {
                cell.textContent = "";
            } else if (date > totalDays) {
                break;
            } else {
                cell.textContent = date;
                date++;
            }
            row.appendChild(cell);
        }
        calendarBody.appendChild(row);
        if (date > totalDays) {
            break;
        }
    }
}
function highlightToday() {
    const today = new Date();
    const cells = document.querySelectorAll("#calendar td");
    cells.forEach(cell => {
        if (cell.textContent == today.getDate() && today.getMonth() === currentDate.getMonth() && today.getFullYear() === currentDate.getFullYear()) {
            cell.style.backgroundColor = "#ff0";
        }
    });
}
const currentDate = new Date();
generateCalendar(currentDate.getMonth(), currentDate.getFullYear());
highlightToday();
document.getElementById("prevMonth").addEventListener("click", () => {
    currentDate.setMonth(currentDate.getMonth() - 1);
    generateCalendar(currentDate.getMonth(), currentDate.getFullYear());
    highlightToday();
});
document.getElementById("nextMonth").addEventListener("click", () => {
    currentDate.setMonth(currentDate.getMonth() + 1);
    generateCalendar(currentDate.getMonth(), currentDate.getFullYear());
    highlightToday();
});

通过以上代码，我们实现了一个能够动态生成每个月日期的日历表格，并且提供了上一月和下一月的导航功能。这个日历表格不仅可以显示当前月份的日期，还能够高亮显示当前日期，使用户体验更加友好。