js怎么做当前日期月历

如何用JavaScript生成当前日期月历

要在网页中生成一个当前日期的月历，可以使用JavaScript、DOM操作、日期处理库。本文将详细介绍如何实现这一功能，并提供代码示例和详细解释。

一、获取当前日期

在生成月历之前，我们需要获取当前的日期。JavaScript 提供了 Date 对象来处理日期和时间。

let today = new Date();
let currentMonth = today.getMonth(); // 获取当前月（0-11）
let currentYear = today.getFullYear(); // 获取当前年

二、计算当前月的天数

每个月的天数可能不同，尤其是二月份，所以我们需要计算当前月份的天数。这可以通过创建一个新日期对象，设置到下个月的第0天来实现。

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

三、生成月历的HTML结构

我们需要生成一个表格来表示月历。表格的第一行是星期名称，接下来的行是日期。

function generateCalendar(month, year) {
    let firstDay = new Date(year, month).getDay(); // 获取月首日是星期几
    let days = daysInMonth(month, year);
    let calendar = `<table border="1">
    <tr>
        <th>Sun</th>
        <th>Mon</th>
        <th>Tue</th>
        <th>Wed</th>
        <th>Thu</th>
        <th>Fri</th>
        <th>Sat</th>
    </tr>
    <tr>`;
    for (let i = 0; i < firstDay; i++) {
        calendar += `<td></td>`;
    }
    for (let day = 1; day <= days; day++) {
        if ((day + firstDay - 1) % 7 === 0) {
            calendar += `</tr><tr>`;
        }
        calendar += `<td>${day}</td>`;
    }
    calendar += `</tr></table>`;
    return calendar;
}

四、将月历添加到网页

将生成的月历 HTML 结构插入到网页的某个元素中。

document.getElementById('calendar').innerHTML = generateCalendar(currentMonth, currentYear);

五、完整代码示例

以下是一个完整的代码示例，包括 HTML 和 JavaScript。

<!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 black;
            text-align: center;
            padding: 5px;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <div id="calendar"></div>
    <script>
        function daysInMonth(month, year) {
            return new Date(year, month + 1, 0).getDate();
        }
        function generateCalendar(month, year) {
            let firstDay = new Date(year, month).getDay(); 
            let days = daysInMonth(month, year);
            let calendar = `<table>
            <tr>
                <th>Sun</th>
                <th>Mon</th>
                <th>Tue</th>
                <th>Wed</th>
                <th>Thu</th>
                <th>Fri</th>
                <th>Sat</th>
            </tr>
            <tr>`;
            for (let i = 0; i < firstDay; i++) {
                calendar += `<td></td>`;
            }
            for (let day = 1; day <= days; day++) {
                if ((day + firstDay - 1) % 7 === 0) {
                    calendar += `</tr><tr>`;
                }
                calendar += `<td>${day}</td>`;
            }
            calendar += `</tr></table>`;
            return calendar;
        }
        let today = new Date();
        let currentMonth = today.getMonth(); 
        let currentYear = today.getFullYear(); 
        document.getElementById('calendar').innerHTML = generateCalendar(currentMonth, currentYear);
    </script>
</body>
</html>

六、优化与扩展

1、添加导航按钮

为了让用户可以查看其他月份的日历，可以添加“上一个月”和“下一个月”按钮。

<!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 black;
            text-align: center;
            padding: 5px;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <button id="prev" onclick="prevMonth()">Previous</button>
    <button id="next" onclick="nextMonth()">Next</button>
    <div id="calendar"></div>
    <script>
        function daysInMonth(month, year) {
            return new Date(year, month + 1, 0).getDate();
        }
        function generateCalendar(month, year) {
            let firstDay = new Date(year, month).getDay(); 
            let days = daysInMonth(month, year);
            let calendar = `<table>
            <tr>
                <th>Sun</th>
                <th>Mon</th>
                <th>Tue</th>
                <th>Wed</th>
                <th>Thu</th>
                <th>Fri</th>
                <th>Sat</th>
            </tr>
            <tr>`;
            for (let i = 0; i < firstDay; i++) {
                calendar += `<td></td>`;
            }
            for (let day = 1; day <= days; day++) {
                if ((day + firstDay - 1) % 7 === 0) {
                    calendar += `</tr><tr>`;
                }
                calendar += `<td>${day}</td>`;
            }
            calendar += `</tr></table>`;
            return calendar;
        }
        let today = new Date();
        let currentMonth = today.getMonth(); 
        let currentYear = today.getFullYear(); 
        function renderCalendar() {
            document.getElementById('calendar').innerHTML = generateCalendar(currentMonth, currentYear);
        }
        function prevMonth() {
            if (currentMonth === 0) {
                currentMonth = 11;
                currentYear--;
            } else {
                currentMonth--;
            }
            renderCalendar();
        }
        function nextMonth() {
            if (currentMonth === 11) {
                currentMonth = 0;
                currentYear++;
            } else {
                currentMonth++;
            }
            renderCalendar();
        }
        renderCalendar();
    </script>
</body>
</html>

通过上面的步骤和代码示例，可以轻松生成和控制当前日期的月历。您可以根据需要进一步扩展和优化此功能，例如添加节假日标记、事件提醒等功能。希望这篇文章对您有所帮助！