html简单的日历界面

以下是一个简单的HTML日历界面示例，包括了基本的日历展示功能。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simple Calendar</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
 
<div>
    <table>
        <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>
</div>
 
<script>
    function buildCalendar(year, month) {
        const daysInMonth = new Date(year, month, 0).getDate();
        const startDay = new Date(year, month - 1, 1).getDay();
 
        const tbody = document.querySelector('table tbody');
        tbody.innerHTML = ''; // 清空之前的日历内容
 
        let day = 1;
        for (let i = 0; i < 6; i++) {
            const tr = document.createElement('tr');
            for (let j = 0; j < 7; j++) {
                if (i === 0 && j < startDay) {
                    const td = document.createElement('td');
                    tr.appendChild(td);
                } else if (day <= daysInMonth) {
                    const td = document.createElement('td');
                    td.textContent = day++;
                    tr.appendChild(td);
                } else {
                    break;
                }
            }
            tbody.appendChild(tr);
        }
    }
 
    // 默认显示当前月份的日历
    const now = new Date();
    buildCalendar(now.getFullYear(), now.getMonth() + 1);
</script>
 
</body>
</html>

这段代码中，我们定义了一个buildCalendar函数，它会根据传入的年份和月份动态构建一个基础的日历。函数计算了这个月的总天数以及这个月的第一天是周几，然后创建相应数量的tr和td来展示日历。

用户可以通过调整buildCalendar函数调用的参数来查看不同月份的日历。例如，可以通过buildCalendar(2023, 3)来查看2023年3月份的日历。

html简单的日历界面

评论已关闭

推荐阅读