JavaScript制作日历_javascript 日历-CSDN博客

本文链接：https://blog.csdn.net/weixin_50821119/article/details/114435766
效果图

代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;

        }

        #calendar {
            background-color: #9900ff;
            color: #fff;
            border-radius: 5px;
            margin: 100px auto;
        }

        #title {
            font-size: 1.4em;
            padding: 4px 0.55em;
        }

        #days th {
            font-weight: bold;
            text-align: center;
            padding: 4px 0.55em;
        }

        #calendar td {
            text-align: center;
            padding: 4px 20px;
        }

        #today {
            color: #f00;
            font-weight: bold;
        }

        .poin {
            cursor: pointer;
            cursor: hand;
        }
    </style>
    <script>
        window.onload=function(){
            var form = document.getElementById('calendar');
            // 通过日历对象去调用自身的init方法
            calendar.init(form);
        }
        var calendar = {
            year: null,
            month: null,
            //日的数组
            dayTable: null,
            //初始化函数
            init(form) {
                // 1获取日数组
               this.dayTable=form.getElementsByTagName('td');
               //2创建日历,传入当前时间
               this.createCalendar(form,new Date());
               var nextMon=form.getElementsByTagName('th')[2];
               var preMon=form.getElementsByTagName('th')[0];
               preMon.onclick=function(){
                calendar.clearCalendar(form)
                   var preDate=new Date(calendar.year,calendar.month-1,1);
                   calendar.createCalendar(form,preDate)
               }
               nextMon.onclick=function(){
                   calendar.clearCalendar(form)
                   var nextDate=new Date(calendar.year,calendar.month+1,1);
                   calendar.createCalendar(form,nextDate)
               }
            },
            //清除日历数据
            clearCalendar(form){
                var tds=form.getElementsByTagName('td');
                for (var i = 0; i < tds.length; i++) {
                    tds[i].innerHTML='&nbsp';
                    // 清除今天的样式
                    tds[i].id='';
                }
            },
            // 3生成日历
            // from table表格  date要创建的日期
            createCalendar(form,date){
                //获取此时的年份
                  this.year=date.getFullYear(); 
                  //获取此时的月份
                  this.month=date.getMonth(); 

                  //年份月份写入日历
                  form.getElementsByTagName('th')[1].innerHTML = this.year+"年"+(this.month+1)+"月";
                  //获取本月的天数
                  var dataNum=this.getDateLen(this.year,this.month);
                  var fristDay = this.getFristDay(calendar.year,calendar.month);
                // 循环将每一天的天数写入到日历中
                // 让i表示日期。
                for (var i = 1; i <= dataNum; i++) {
                    this.dayTable[fristDay+i-1].innerHTML=i;
                    var nowDate =new Date();
                    if(i ==nowDate.getDate() && calendar.month ==nowDate.getMonth()&&calendar.year == nowDate.getFullYear()){
                        //    将当期元素的id设置为today
                        calendar.dayTable[i+fristDay-1].id = "today";
                   }
                }
            },
             // 获取本月份的天数
             getDateLen(year,month){
                //获取下个月的第一天
                var nextMonth=new Date(year,month+1,1);
                // 设置下月第一天的小时-1，也就是上个月最后一天的小时数，随便减去一个值不要超过24小时
                nextMonth.setHours(nextMonth.getHours()-1);
                //获取此时下个月的日期,就是上个月最后一天.
                return nextMonth.getDate();
             },
              // 获取本月第一天为星期几。
            getFristDay:function(year,month){
                var fristDay=new Date(year,month,1);
                return fristDay.getDay();
            }
        } 
    </script>
</head>

<body>
    <table id="calendar">
        <tr>
            <!-- 向左箭头 -->
            <th class="poin">&lt;&lt;</th>
            <!-- 年月 -->
            <th id="title" colspan="5"></th>
            <!-- 向右箭头 -->
            <th class="poin">&gt;&gt;</th>
        </tr>
        <tr id="days">
            <th>日</th>
            <th>一</th>

            <th>二</th>
            <th>三</th>
            <th>四</th>
            <th>五</th>
            <th>六</th>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </table>

</body>

</html>