制作日历原理就是通过对Date对象和BOM对象的混合使用来完成。

innerHTML和innerText的区别：

innerHTML会把整个语句当成代码来执行

innerText会把整个语句当成一个文本节点来处理

    <style>
        .divcalinder ul{
            margin:0;
            padding:0;
            list-style-type:none;
        }
        .divcalinder{
            width:434px;
            margin:0 auto;
        }
        .calinderset{
            text-align:center;
        }
        .calinderset button{
            width:100px;
            height:40px;
            margin:2px;
            font-size:20px;
            overflow:hidden;
        }
        .divmessage{
            height:30px;
            line-height:30px;
            font-size:20px;
            text-align:center;
            color:gold;
        }
        .ulweek{
            text-align:center;
            height:30px;
            border-bottom:1px solid white;
            overflow:hidden;
        }
        .ulweek li{
            float:left;
            color:black;
            width:62px;
            padding:5px 0;
            font-size:16px;
            color:white;
        }
        .ulday{
            overflow:hidden;
        }
        .ulday li{
            float:left;
            width:58px;
            height:58px;
            border:1px solid aqua;
            margin:1px;
            text-align:center;
            line-height:58px;
            font-size:18px;
            color:black;
        }
    </style>
    <div class="divcalinder">
        <div class="calinderset">
            <button>上一年</button>
            <button>上一月</button>
            <button>下一月</button>
            <button>下一年</button>
        </div>
        <div class="divmessage"></div>
        <ul class="ulweek">
            <li>星期日</li>
            <li>星期一</li>
            <li>星期二</li>
            <li>星期三</li>
            <li>星期四</li>
            <li>星期五</li>
            <li>星期六</li>
        </ul>
        <ul class="ulday"></ul>
    </div>
    <script>
        var btns=document.querySelectorAll(".calinderset button");
        var message=document.querySelector(".divmessage");
        var ul=document.querySelector(".ulday");
        var time=new Object();
        var date1=new Date();
        time.y=date1.getFullYear();
        time.m=date1.getMonth();
        var newD=date1.getDate();
        var newM=date1.getMonth();
        var newY=date1.getFullYear();
        function calinder(){
            ul.innerHTML="";
            message.innerHTML="";
            message.innerHTML=time.y+"年"+(time.m+1)+"月";
            var first=new Date(time.y,time.m,1);
            time.first=first.getDay();
            var last=new Date(time.y,time.m+1,0);
            time.last=last.getDate();    
            for(var i=0;i<time.first;i++){
                var newLi=document.createElement("li");
                newLi.style.backgroundColor="aqua";
                ul.appendChild(newLi);
            }
            for(var i=1;i<=time.last;i++){
                var newLi=document.createElement("li");
                newLi.innerText=i;
                newLi.style.backgroundColor="lime";
                ul.appendChild(newLi);
                if(newD==i&&newM==time.m&&newY==time.y){
                    newLi.style.backgroundColor="red";
                }
            }
        }
        calinder();
        btns[1].onclick=function(){
            time.m--;
            if(time.m<0){
                time.m=11;
                time.y--;
            }
            calinder();
        }
        btns[2].onclick=function(){
            time.m++;
            if(time.m>11){
                time.m=0;
                time.y++;
            }
            calinder();
        }
        btns[0].onclick=function(){
            time.y--;
            calinder();
        }
        btns[3].onclick=function(){
            time.y++;
            calinder();
        }
    </script>

    
    

        
上一年上一月下一月下一年
        
        

        
星期日
星期一
星期二
星期三
星期四
星期五
星期六