JS自制极简日历Demo

这个日历界面不属于任何插件，纯粹用最基本的JS函数获取到每个位置对应的日期，然后再通过遍历拼接table表单的方式赋值到HTML里面进行展示，日历效果的显示，其中使用到的文件只需要一个Jquery的JS文件即可实现如下效果：

Demo只是一个简单的日历模板，没有太多函数和限制，开发人员可以基于自己的想法在里面任意更改

下列是JS代码：

<script type="text/javascript" src="js/jquery.js" ></script>
        <script type="text/javascript">
            $(function () {
                //获取当前日期及其年月
                var todate=new Date();
                var year=todate.getFullYear();//当前年份
                var month=todate.getMonth()+1;//当前月份
                $("#tdtitle").html(year+"年"+month+"月");
                //传入ID定义初始化方法
                InitialMethod($("#tbTypesetting"), year, month, "trclass", 'tdclass');
            });
            //初始化方法
            function InitialMethod(tabID, year, month, style, tdclass)
            {
                //获取月份的第一天
                var MonthOne = new Date(year + '/' + month + '/01');
                //获取第一天是星期几
                var weekOne = MonthOne.getDay();
                //几天前
                var AgoDay = (weekOne) * (-1);
                //当月最大日期的索引
                var MaxDay = getCountDays(MonthOne)-1;
                //当前日期
                var today = getToday();
                var strhtml;
                var countNum = 0;
                //6行 7列
                for (var i = 0; i < 6; i++)
                {
                    strhtml += "<tr class='" + style + "'>";
                    for (var j = 0; j < 7; j++)
                    {
                        var sum = AgoDay + countNum;
                        if (sum < 0 || sum > MaxDay)
                        {
                            strhtml += "<td class='" + tdclass + "' style='color:#cccccc;'>" + ReturnDay(sum,MonthOne) + "</td>";
                        }
                        else if (ReturnDay(sum,MonthOne) == today) {
                            strhtml += "<td class='" + tdclass + "' style='color:red;'>" + ReturnDay(sum,MonthOne) + "</td>";
                        }
                        else {
                            strhtml += "<td class='" + tdclass + "'>" + ReturnDay(sum,MonthOne) + "</td>";
                        }
                        countNum++;
                    }
                    strhtml+="</tr>";
                }
                tabID.html(strhtml);
            }

            //几天前/后的日期
            function ReturnDay(day,OneDate) {
                var time = new Date(OneDate);
                time.setDate(time.getDate() + day);//获取Day天后的日期
                var y = time.getFullYear();
                var m = time.getMonth() + 1;//获取当前月份的日期
                var d = time.getDate();
                return d;
            }

            //当月有多少天
            function getCountDays(time) {
                var curDate = new Date(time);
                /* 获取当前月份 */
                var curMonth = curDate.getMonth();
                /*  生成实际的月份: 由于curMonth会比实际月份小1, 故需加1 */
                curDate.setMonth(curMonth + 1);
                /* 将日期设置为0, 这里为什么要这样设置, 我不知道原因, 这是从网上学来的 */
                curDate.setDate(0);
                /* 返回当月的天数 */
                return curDate.getDate();
            }
            //当前日期
            function getToday()
            {
                var time = new Date();
                var today = time.getDate();
                return today;
            }
        </script>

HTML代码：

<body>
        <div id="SlopeCheckContainer" style="text-align:center; margin:auto;">
            <table id="concent" class="tableclass">
                <tr class="trclass"><td class="tdclass" colspan="7" id="tdtitle">2019年8月</td></tr>
                <tr style="height:5%">
                    <td class="tdclass">星期天</td>
                    <td class="tdclass">星期一</td>
                    <td class="tdclass">星期二</td>
                    <td class="tdclass">星期三</td>
                    <td class="tdclass">星期四</td>
                    <td class="tdclass">星期五</td>
                    <td class="tdclass">星期六</td>
                </tr>
                <tbody id="tbTypesetting"></tbody>
            </table>
        </div>
    </body>

Demo的完整代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .tableclass
            {
                width:100%;
                clear:both;
                font-size: 12px;
                border-right: 1px solid #cccccc;
                border-bottom: 1px solid #cccccc;
                border-collapse: collapse;
            }

            .trclass
            {
                height:50px;
            }

            .tdclass
            {
                border-left: 1px solid #cccccc;
                border-top: 1px solid #cccccc;
                background-color:#ffffff;
            }
        </style>
        <script type="text/javascript" src="js/jquery.js" ></script>
        <script type="text/javascript">
            $(function () {
                //获取当前日期及其年月
                var todate=new Date();
                var year=todate.getFullYear();//当前年份
                var month=todate.getMonth()+1;//当前月份
                $("#tdtitle").html(year+"年"+month+"月");
                //传入ID定义初始化方法
                InitialMethod($("#tbTypesetting"), year, month, "trclass", 'tdclass');
            });
            //初始化方法
            function InitialMethod(tabID, year, month, style, tdclass)
            {
                //获取月份的第一天
                var MonthOne = new Date(year + '/' + month + '/01');
                //获取第一天是星期几
                var weekOne = MonthOne.getDay();
                //几天前
                var AgoDay = (weekOne) * (-1);
                //当月最大日期的索引
                var MaxDay = getCountDays(MonthOne)-1;
                //当前日期
                var today = getToday();
                var strhtml;
                var countNum = 0;
                //6行 7列
                for (var i = 0; i < 6; i++)
                {
                    strhtml += "<tr class='" + style + "'>";
                    for (var j = 0; j < 7; j++)
                    {
                        var sum = AgoDay + countNum;
                        if (sum < 0 || sum > MaxDay)
                        {
                            strhtml += "<td class='" + tdclass + "' style='color:#cccccc;'>" + ReturnDay(sum,MonthOne) + "</td>";
                        }
                        else if (ReturnDay(sum,MonthOne) == today) {
                            strhtml += "<td class='" + tdclass + "' style='color:red;'>" + ReturnDay(sum,MonthOne) + "</td>";
                        }
                        else {
                            strhtml += "<td class='" + tdclass + "'>" + ReturnDay(sum,MonthOne) + "</td>";
                        }
                        countNum++;
                    }
                    strhtml+="</tr>";
                }
                tabID.html(strhtml);
            }

            //几天前/后的日期
            function ReturnDay(day,OneDate) {
                var time = new Date(OneDate);
                time.setDate(time.getDate() + day);//获取Day天后的日期
                var y = time.getFullYear();
                var m = time.getMonth() + 1;//获取当前月份的日期
                var d = time.getDate();
                return d;
            }

            //当月有多少天
            function getCountDays(time) {
                var curDate = new Date(time);
                /* 获取当前月份 */
                var curMonth = curDate.getMonth();
                /*  生成实际的月份: 由于curMonth会比实际月份小1, 故需加1 */
                curDate.setMonth(curMonth + 1);
                /* 将日期设置为0, 这里为什么要这样设置, 我不知道原因, 这是从网上学来的 */
                curDate.setDate(0);
                /* 返回当月的天数 */
                return curDate.getDate();
            }
            //当前日期
            function getToday()
            {
                var time = new Date();
                var today = time.getDate();
                return today;
            }
        </script>
    </head>
    <body>
        <div id="SlopeCheckContainer" style="text-align:center; margin:auto;">
            <table id="concent" class="tableclass">
                <tr class="trclass"><td class="tdclass" colspan="7" id="tdtitle">2019年8月</td></tr>
                <tr style="height:5%">
                    <td class="tdclass">星期天</td>
                    <td class="tdclass">星期一</td>
                    <td class="tdclass">星期二</td>
                    <td class="tdclass">星期三</td>
                    <td class="tdclass">星期四</td>
                    <td class="tdclass">星期五</td>
                    <td class="tdclass">星期六</td>
                </tr>
                <tbody id="tbTypesetting"></tbody>
            </table>
        </div>
    </body>
</html>