简单易懂的HTML中文小日历程序 - 显示日期及星期 - 常规

简单易懂的HTML中文小日历程序 - 显示日期及星期

本页面提供一个使用HTML编写的简单中文小日历程序，可以显示今日日期信息并展示本月其他日期的星期。代码清晰易懂，并包含对闰年判断、日期获取和星期显示的详细解释。

闰年判断

由于地球绕太阳运行周期为365天5小时48分46秒（合365.24219天）即一回归年，公历把一年定为365天。所余下的时间约为四年累计一天，加在二月里，所以平常年份每年365天，二月为28天，闰年为366天，二月为29天。因此，每400年中有97个闰年，闰年在2月末增加一天，闰年366天。闰年的计算方法：公元纪年的年数可以被四整除，即为闰年；被100整除而不能被400整除为平年；被100整除也可被400整除的为闰年。如2000年是闰年，而1900年不是。

代码示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>中文小日历</title>
    <style>
        table {
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 5px;
        }
    </style>
</head>
<body>
    <h1>中文小日历</h1>
    <h2>今日日期信息</h2>
    <p id="dateInfo"></p>
    <h2>本月其他日期的星期</h2>
    <table>
        <tr>
            <th>日</th>
            <th>一</th>
            <th>二</th>
            <th>三</th>
            <th>四</th>
            <th>五</th>
            <th>六</th>
        </tr>
        <tr id="weekRow"></tr>
    </table>

    <script>
        // 获取当前日期的年份、月份、日期、星期
        var currentDate = new Date();
        var currentYear = currentDate.getFullYear();
        var currentMonth = currentDate.getMonth() + 1;
        var currentDay = currentDate.getDate();
        var currentWeek = currentDate.getDay();

        // 显示今日日期信息
        document.getElementById("dateInfo").innerHTML = "今天是" + currentYear + "年" + currentMonth + "月" + currentDay + "日";

        // 获取本月第一天的日期对象
        var firstDayOfMonth = new Date(currentYear, currentMonth - 1, 1);
        var firstDayOfWeek = firstDayOfMonth.getDay(); // 本月第一天的星期

        // 计算本月总天数
        var daysInMonth;
        if (currentMonth === 2) {
            if ((currentYear % 4 === 0 && currentYear % 100 !== 0) || currentYear % 400 === 0) {
                daysInMonth = 29; // 闰年2月有29天
            } else {
                daysInMonth = 28; // 平年2月有28天
            }
        } else if ([4, 6, 9, 11].includes(currentMonth)) {
            daysInMonth = 30; // 4、6、9、11月有30天
        } else {
            daysInMonth = 31; // 其他月份都有31天
        }

        // 创建星期表格
        var weekRow = document.getElementById("weekRow");
        for (var i = 0; i < firstDayOfWeek; i++) {
            weekRow.innerHTML += "<td></td>";
        }
        for (var j = 1; j <= daysInMonth; j++) {
            if (weekRow.childElementCount === 7) {
                weekRow = document.createElement("tr");
                document.getElementById("weekRow").parentNode.appendChild(weekRow);
            }
            weekRow.innerHTML += "<td>" + j + "</td>";
        }
    </script>
</body>
</html>

代码解释

获取当前日期信息： 使用 Date() 对象获取当前日期并提取年份、月份、日期和星期。
显示今日日期信息： 将获取到的日期信息拼接成字符串并显示在页面中。
获取本月第一天： 使用 new Date(year, month - 1, 1) 获取本月的第一天，并获取该天的星期。
计算本月天数： 根据月份和闰年判断来计算本月的天数。
创建星期表格： 根据本月第一天所在的星期，在表格中填充空白单元格，然后循环遍历本月天数，填充日期信息。

使用方法

将以上代码保存为一个HTML文件，然后在浏览器中打开该文件，即可显示出今日的日期信息和本月其他日期的星期。

注意：

该代码使用 Date() 对象获取系统时间，如果浏览器时间设置不正确，则日历显示的日期也会不正确。
该代码仅供学习参考，实际应用中可能需要根据需求进行调整和完善。