2021-08-23

JS简单日历的制作

HTML 先创建一个简单布局

        <div class="header">
            <span class="top">上</span>
            <span class="title"></span>
            <span class="bottom">下 </span>
        </div>
        <div class="content">
            <ul class="week">
                <li>一</li> 
                <li>二</li>
                <li>三</li>
                <li>四</li>
                <li>五</li>
                <li>六</li>
                <li>七</li>
            </ul>
            <ul class="riqi">
            </ul>
        </div>
    </div>

CSS

        *{padding: 0;margin: 0m;list-style: none;color: #fff;}
        a{text-decoration: none;}
        .box{
            width: 400px;
            height: 400px;
            margin: 80px auto;
            background-color: #000;
            font-size: 20px;
        }
        .header{
            padding-top: 10px;
            height: 40px;
            color: red;
            line-height: 30px;
            display: flex;
            justify-content: space-evenly;
        }
        .content{
            line-height: 40px;
        }
        .week{
            display: flex;
            justify-content: space-evenly;
        }
        .riqi{
            text-align: center;
           padding: 0 10px ;
            display: flex;
            flex-wrap: wrap;
        }
        .riqi li{
            width: 14%;
        }
        .last,.next{
            color:  grey;
        }

JavaScript
首先需要封装四个函数，提公共部分

传入一个日期,返回该月的第一天 是星期几? (星期天)

    function getFirstDayWeek(date) {
        date = new Date(date); //根据原日期得到新日期 => 重新赋值给形参
        date.setDate(1);
        var week = date.getDay();
        week = week == 0 ? 7 : week;
        //getDay范围为0-6
        return week;
    }

传入一个日期,返回该日期对应的上个月有多少天? (上个月)

   function getLastMonthDay(date) {
        date = new Date(date);
        date.setDate(0);
        //日期改为0跳转到上个月的最后一天
        var lastDate = date.getDate();
        return lastDate;
    }

传入一个日期,返回该日期对应的月有多少天? (当前月)

    function getMonthDay(date) {
        date = new Date(date);
        date.setDate(6);
        //先把date改为小于28的日期，防止在31号时遇到下个月是30天的情况，日期会自动跳转到下下个月的一号。                                      
        date.setMonth(date.getMonth() + 1);
        date.setDate(0);
        return date.getDate();
    }

生成日历

   function createDate() {
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        title.innerText = `${year}年${month}月`;
		
        var week = getFirstDayWeek(date);
        var lastDate = getLastMonthDay(date);
        var nowDate = getMonthDay(date);

        var html = "";
        for (var i = lastDate - (week - 1) + 1; i <= lastDate; i++) {
            html += `<li class="last">${i}</li>`;
        }
        //上个月剩余天数排列
        for (var i = 1; i <= nowDate; i++) {
            html += `<li>${i}</li>`;
            
        }
        //当前月天数排列
        for (var i = 1; i <= (42 - (week - 1) - nowDate); i++) {
            html += `<li class="next">${i}</li>`
        }
        //下个月的天数：42-上个月剩余-本月天数
        console.log(i);
        riqi.innerHTML = html;
    }

JS部分

<script type ="text/javascript">
    var title = document.getElementsByClassName("title")[0];
    var riqi = document.getElementsByClassName("riqi")[0];
    var shang = document.getElementsByClassName("top")[0];
    var xia = document.getElementsByClassName("bottom")[0];

    var date = new Date();
    createDate();

    shang.onclick = function(){
        date.setDate(1);
        date.setMonth(date.getMonth()-1);

        createDate();
    }

    
    xia.onclick = function(){
        date.setDate(1);
        date.setMonth(date.getMonth()+1);

       createDate();
    }
</script>