静态网页：日历

效果： 群：970353786

	
		
		
        
            #app{
                width: 600px;
                border: 1px solid black;
                margin: 100px auto;
            }
            #titleBox{
                width: 100%;
                height: 60px;
                line-height: 60px;
                background-color: skyblue;
            }
            #leftspan{
                float: left;
                font-size: 30px;
                cursor: pointer;
            }
            #rightspan{
                float: right;
                font-size: 30px;
                cursor: pointer;
            }
            #title{
                text-align: center;
                font-size: 40px;
            }
            table{
                width: 100%;
                border: 1px solid darkgray;
            }
            tr{
                height: 30px;
            }
            td,th{
                text-align: center;
                border: 1px solid #666;
            }
        
	
	
        
            
                上一个月
                下一个月
                XXXX年XX月
            
            
                
                    
                       周日 
                       周一 
                       周二 
                       周三 
                       周四 
                       周五 
                       周六 
                    
                
                
                    
                        0000000
                    
                    
                        0000000
                    
                    
                        0000000
                    
                    
                        0000000
                    
                    
                        0000000
                    
                    
                        0000000
                    
                    
                
            
        
	
    
        var leftspan = document.getElementById("leftspan");
        var rightspan = document.getElementById("rightspan");
        var titleDiv = document.getElementById("title")
        
        var mydate = new Date();
        console.log(mydate);
        showDate();
        function showDate(){
            var year = mydate.getFullYear();//2021
            var month = mydate.getMonth();//用0~11表示1~12
            titleDiv.innerText = year + "年" + (month+1) + "月";
            //确定每个月的日历
            //先确定每个月的1号是星期几
            mydate = new Date(year,month,1);
            var week = mydate.getDay();
            console.log(week);//用0~6表示周日、周一到周六
            //再确定每个月有多少天
            mydate = new Date(year,month+1,0);//0号日期
            console.log(mydate);
            var days = mydate.getDate();
            console.log(days);
            //把日期填写到相应的td中
            //获取所有的td
            var tds = document.querySelectorAll("tbody td");
            console.log(tds);
            // tds[week+0].innerText = 1;
            // tds[week+1].innerText = 1+1;
            // tds[week+2].innerText = 1+2;
            // tds[week+3].innerText = 1+3;  //.....=== days结束
            //先清除td中所有内容
            for (var i = 0;i