JS万年历

 

//style代码

.box{

        width: 200px;

        height: 200px;

        text-align: center;

        background-color: blueviolet;

        float: left;

        margin-left: 20px;

        margin-top: 20px;

        margin-bottom: 20px;

    }

    .box:nth-child(2){

        margin-left: 90px;

    }

    .box:nth-child(8){

        margin-left: 90px;

    }

//JS代码

<script>

        function _calendar(year) {

            var html = '';

            var week = new Date(year, 0).getDay();

            for (let i = 1; i <= 12; i++) {

                html += '<table class="box">';

                html += '<tr><th colspan="7">' + year + '年' + i + '月</th></tr>';

                html += '<tr><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>';

                html += '<tr>';

                for (let j = 1; j <= new Date(year, i, 0).getDate(); j++) {

                    if (j == 1 && week > 0) {

                        html += '<td colspan="' + week + '"></td>';

                    }

                    html += '<td>' + j + '</td>';

                    if (week == 6) {

                        html += '</tr><tr>'

                    }

                    week = week + 1 > 6 ? 0 : week + 1

                }

                html += '</tr>';

                html += '</table>';

            }

            return html

        }

        var _year = +prompt('请输入正确年份');

        if (!isNaN(_year)) {

            let wannianli = _calendar(_year);

            document.write(wannianli);

        } else {

            alert('请输入正确年份');

        }

    </script>