js 日历

作者：妖孽少年发布日期:2025-10-26 浏览:67

<!DOCTYPE html>
<html>
<head>
    <title>JS 日历</title>
    <style>
        table {
            border-collapse: collapse;
            width: 200px;
        }
        th, td {
            border: 1px solid black;
            padding: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>JS 日历</h1>
    <div id="calendar"></div>

    <script>
        function createCalendar(year, month) {
            const daysOfWeek = ['日', '一', '二', '三', '四', '五', '六'];
            const date = new Date(year, month - 1);
            const firstDayOfMonth = new Date(date.getFullYear(), date.getMonth(), 1).getDay();
            const lastDateOfMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
            const calendarTable = document.createElement('table');
            const thead = document.createElement('thead');
            const tbody = document.createElement('tbody');

            // Create header row for days of the week
            const headerRow = document.createElement('tr');
            daysOfWeek.forEach(day => {
                const th = document.createElement('th');
                th.textContent = day;
                headerRow.appendChild(th);
            });
            thead.appendChild(headerRow);
            calendarTable.appendChild(thead);

            // Create body rows for dates
            let dateRow = document.createElement('tr');
            let currentDate = 1;

            for (let i = 0; i < firstDayOfMonth; i++) {
                const emptyCell = document.createElement('td');
                dateRow.appendChild(emptyCell);
            }

            while (currentDate <= lastDateOfMonth) {
                for (let i = firstDayOfMonth; i < 7; i++) {
                    if (currentDate > lastDateOfMonth) break;
                    const dateCell = document.createElement('td');
                    dateCell.textContent = currentDate;
                    dateRow.appendChild(dateCell);
                    currentDate++;
                }
                tbody.appendChild(dateRow);
                dateRow = document.createElement('tr');
                firstDayOfMonth = 0; // Reset for next row
            }

            calendarTable.appendChild(tbody);
            document.getElementById('calendar').appendChild(calendarTable);
        }

        // Example usage: Create a calendar for January 2023
        createCalendar(2023, 1);
    </script>
</body>
</html>

解释说明：

HTML结构:
- 包含一个标题 (<h1>) 和一个用于显示日历的 <div> 元素。
CSS样式:
- 简单的表格样式，设置边框和内边距。
JavaScript代码:
- createCalendar 函数接收年份和月份作为参数，生成对应月份的日历。
- 使用 Date 对象来获取每个月的第一天是星期几以及该月的总天数。
- 创建表格结构，包括表头（星期）和表体（日期），并将其插入到页面中。
- 示例调用：createCalendar(2023, 1) 会生成2023年1月的日历。

通过这段代码，你可以轻松地在网页上生成指定年份和月份的日历。

上一篇：js 执行顺序

下一篇：js 日历控件