js中的小案例

Posted 2021-02-20 山吹同学

 

效果图：

html代码:

        <div id="date">
            <p>
                <span id="prev">上一月</span>
                <span id="year">2022</span>
                <span id="next">下一月</span>
            </p>
            <h5 id="month">七月</h5>
            <ul id="title">
                <li>日</li>
                <li>一</li>
                <li>二</li>
                <li>三</li>
                <li>四</li>
                <li>五</li>
                <li>六</li>
            </ul>
            <ul id="days"></ul>
        </div>            

css代码:

        *{
                margin: 0px;
                padding: 0px;
            }
            #date{
                width: 300px;
                padding: 10px;
                border: 1px solid #000000;
            }
            #date>p{
                display: flex;
            }
            #date>p>span{
                display: inline-block;
                width: 100px;
                text-align: center;
            }
            #month{
                text-align: center;
                font-weight: 400;
            }
            #title{
                list-style: none;
                display: flex;
                width: 300px;
                padding: 0;
                margin: 0;
                
            }
            #title>li{
                flex: 1;
                text-align: center;
                width: 100%;
                background: #C0C0C0;
            }
            #days{
                height: 250px;
                margin-top: 10px;
            }
            
            #days>li{
                list-style: none;
                text-align: center;
                float: left;
                width: 42.28px;
                height: 42.28px;
            }
            .active{
                color:orange;
            }                

javascript代码:

　　　　let date=new Date();
        add();
        function add(){
            
            let year=date.getFullYear()
            document.getElementById("year").innerText=year
            let month=date.getMonth();
            let monthArr=["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"];
            document.getElementById("month").innerText=monthArr[month];
            // 获取当天的天数
            let currentDay=date.getDate()
            // 获取每个月的第一天是周几
            let week=new Date(year,month,1).getDay();
            let html=""    
            // 代表前面空白的li标签        
            for(var i=0;i<week;i++){
                console.log(i)
                html+="<li></li>"
            }
            // 获取每个月的天数的最后一天
            let lastDay=new Date(year,month+1,0).getDate()    
            for(var i=1;i<=lastDay;i++){
                if(i==currentDay){
                    html+=`<li class="active">${i}</li>`
                }else{
                    html+=`<li>${i}</li>`
                }
            }
            document.getElementById("days").innerHTML=html
        }
        document.getElementById("prev").onclick=function(){
            date.setMonth(date.getMonth()-1)
            add();
        }
        document.getElementById("next").onclick=function(){
            date.setMonth(date.getMonth()+1)
            add();
        }

关键代码是

new Date(year,month,1).getDay()  获取每个月的第一个天是星期几

new Date(year,month+1,0).getDate()  获取每个月的最后一天是几号