[前端] 日历入门写法

最新推荐文章于 2025-07-09 12:31:18 发布

天空还下着雪

最新推荐文章于 2025-07-09 12:31:18 发布

阅读量3.2k

点赞数 1

分类专栏：前端文章标签：前端日历

前端专栏收录该内容

154 篇文章

订阅专栏

此篇文章是转载整理的，这是一个比较典型的日历入门写法，凡事从入门做起，至于后面的扩展需要自己去措索解决。

好了费话不多讲，直接上效果

代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>日历</title>
</head>
<body>
    
    <script>
        /*
            日历
            1、判断年份是闰年还是平年，从而判断2月份是29天还是28天
            2、定义数组1~12月，每月多少天
            3、定位当前月份第一天是星期几
            4、多余部分置空
        */  

        var oDate = new Date();
        var year =  oDate.getFullYear();  // 年
        var month =  oDate.getMonth();  // 月( 0-11 )
        var date =  oDate.getDate();  // 日

        /*var weekArr = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六'];*/

        // 获取当月第1天是星期几
        var firstDay = (new Date(year, month, 1)).getDay();  

        // 判断是否是闰年(29) 平年(28)
        function isLeapYear() {
            if(((year % 4)==0) && ((year % 100)!=0) || ((year % 400)==0)) {
                return 1;
            } else {
                return 0;
            }
        }

        // 获取每个月的天数
        var monthDaysArr = [31, 28+isLeapYear(), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

        // 计算行数
        var rows =  Math.ceil((monthDaysArr[month] + firstDay) / 7);
        
        // 打印表头
        document.write ("<table border='1' align='center' width='240' cellspacing='0'><tr><td align='center'>日</td><td align='center'>一</td><td align='center'>二</td><td align='center'>三</td><td align='center'>四</td><td align='center'>五</td><td align='center'>六</td></tr>");

        for(var i=0; i<rows; i++) { //表格的行
            document.write("<tr>");

            // 表格每行的单元格填充
            for(var j=0; j<7; j++) {

                // 单元格自然序列号
                tdIndex = i*7+j;  

                // 计算日期
                fillDate = tdIndex-firstDay+1; 

                // 过滤无效日期（小于等于零的、大于月总天数的）
                if(fillDate<=0 || fillDate>monthDaysArr[month]) {
                   fillDate="&nbsp;"; 
                } else {
                    fillDate = tdIndex-firstDay+1; 
                }

                // 打印日期，并把今天底色设为红色
                if(fillDate == date) {
                    document.write ("<td align='center' bgcolor='red'>" + fillDate + "</td>");
                } else {
                    document.write ("<td align='center'>" + fillDate + "</td>");
                }
            }

            document.write("</tr>"); //表格的行结束
        }

        document.write("</table>"); // 表格结束
    </script>
</body>
</html>

谢谢关注！