制作一个万年历

完成效果（2022年）

 

 

CSS部分

 

<style>

     .years_header {

            width: 350px;

            height: 30px;

            margin: 0 auto;

            line-height: 30px;

            font-size: 35px;

            text-align: center;

            margin-bottom: -20px;

        }

        .month_header {

            width: 298px;

            height: 30px;

            text-align: center;

            line-height: 30px;

            font-size: 16px;

            font-weight: 700;

        }

        .months {

            width: 297px;

            height: 210px;

            float: left;

            box-sizing: border-box;

            text-align: left;

            border: 1px red dashed;

            margin-left: 65px;

            margin-top: 15px;

            border-radius: 15px;

        }

       .days {

            width: 42px;

            height: 25px;

            float: left;

            box-sizing: border-box;

            text-align: center;

            line-height: 20px;

            background-color: aqua;

            border: 1px black solid;

            border-radius: 5px;

        }

    </style>

JS部分

 

<script>

    var year = prompt("请输入一个年份")

    document.write("<div class='years_header'>" + year + "年" + "</div>")

    for (let month = 0; month < 12; month++) {

        var days = new Date(year, month + 1, 0).getDate() //获取每一个月有多少天

        if (month % 4 == 0) {

            document.write("<br>")

        }

        document.write('<div class="months">'); //按月进行换行 月标签的前标签

        document.write('<div class="month_header">' + (year + "年" + (month + 1) + "月" + "<br>") + "</div>");

        for (let week = 0; week < 7; week++) {

            switch (week) {

                case 0:

                    document.write('<div class="days">' + "日" + "</div>");

                    break;

                case 1:

                    document.write('<div class="days">' + "一" + "</div>");

                    break;

                case 2:

                    document.write('<div class="days">' + "二" + "</div>");

                    break;

                case 3:

                    document.write('<div class="days">' + "三" + "</div>");

                    break;

                case 4:

                    document.write('<div class="days">' + "四" + "</div>");

                    break;

                case 5:

                    document.write('<div class="days">' + "五" + "</div>");

                    break;

                case 6:

                    document.write('<div class="days">' + "六" + "</div>");

                    break;

            }

        }

        var week = new Date(year, month, 1).getDay()

        for (let space = 0; space < week; space++) {

            document.write('<div class="days">' + "</div>"); //定义每个月的第一天是周几，是周几就在前边写多少个空div

        }

        for (let i = 0; i < days; i++) {

            document.write('<div class="days">' + (i + 1) + "</div>"); //循环输出每一天

        }

        document.write('</div>'); //按月进行换行 月标签的前标签

    }

</script>