简单的日历js

以下是一个简单使用JavaScript实现日历功能的示例：

一、基础概念

HTML结构
- 用于构建日历的基本布局，例如包含表头（显示星期等信息）和表体（显示日期单元格）的<table>元素。

JavaScript操作DOM（文档对象模型）
- 通过JavaScript来动态创建、修改HTML元素，从而实现日历中日期的生成、高亮显示当前日期等功能。

二、优势

交互性
- 可以根据用户的操作（如点击切换月份）实时更新日历显示内容。

定制性
- 能够轻松修改样式和功能，比如添加节假日标记、事件提醒等功能。

三、类型

静态日历
- 只是简单显示固定的日期范围，通常用于展示某个特定时间段内的日期布局。

动态日历
- 可以根据当前日期自动调整显示内容，并且支持用户交互操作，如切换月份、年份等。

四、应用场景

网页布局中的日期选择器
- 在表单中方便用户选择日期。

日程管理应用的部分界面
- 展示日期以便用户安排日常事务。

五、示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device-width, initial - scale = 1.0">
    <title>Simple Calendar</title>
    <style>
        table {
            width: 100%;
            border - collapse: collapse;
        }

        th,
        td {
            border: 1px solid black;
            padding: 5px;
            text - align: center;
        }
    </style>
</head>

<body>
    <div id="calendar"></div>
    <script>
        function generateCalendar(year, month) {
            const calendarDiv = document.getElementById('calendar');
            calendarDiv.innerHTML = '';
            const date = new Date(year, month, 1);
            const daysInMonth = new Date(year, month + 1, 0).getDate();
            const firstDayOfWeek = date.getDay() || 7;
            let calendarHTML = '<table>';
            calendarHTML += '<tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr>';
            let dayCount = 1;
            for (let i = 0; i < 6; i++) {
                calendarHTML += '<tr>';
                for (let j = 0; j < 7; j++) {
                    if (i === 0 && j < firstDayOfWeek - 1) {
                        calendarHTML += '<td></td>';
                    } else if (dayCount > daysInMonth) {
                        break;
                    } else {
                        calendarHTML += '<td>' + dayCount + '</td>';
                        dayCount++;
                    }
                }
                calendarHTML += '</tr>';
                if (dayCount > daysInMonth) {
                    break;
                }
            }
            calendarHTML += '</table>';
            calendarDiv.innerHTML = calendarHTML;
        }
        // 生成当前月份的日历
        const today = new Date();
        generateCalendar(today.getFullYear(), today.getMonth());
    </script>
</body>

</html>

这个示例代码创建了一个简单的动态日历，它会根据当前月份生成对应的日历表格。如果要实现更多功能，例如切换月份和年份，可以添加相应的事件监听器来修改generateCalendar函数的参数。