jq写简易日历

css部分样式：

      * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    li.disabled {
        background: #eee;
        color: #ccc;
        cursor: not-allowed;
    }

    .container {
        border: 1px solid #ccc;
        margin: 50px;
        width: 350px;
    }

    .container li {
        width: 50px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        cursor: pointer;
    }

    .container li:not(.disabled):hover {
        background: rgb(185, 238, 238);
    }

    .container ul {
        display: flex;
        flex-wrap: wrap;
    }

    li.active {
        background: darkcyan;
        color: #fff;
    }

HTML部分：

<button class="prev">上月</button>
<button class="next">下月</button>
<div class="container">
    <ul>
        <li>日</li>
        <li>一</li>
        <li>二</li>
        <li>三</li>
        <li>四</li>
        <li>五</li>
        <li>六</li>
    </ul>
    <ul class='content'>

    </ul>
</div>

js部分：

        $(function () {

        let totalDays = 0
        let now = new Date()
        let today = now.getDate()
        let global_month = now.getMonth() + 1
        let global_year = now.getFullYear()

        $('.prev').click(function () {
            now.setMonth(now.getMonth() - 1) //6-31  7-1
            initCalendar()
        })

        $('.next').click(function () {
            now.setMonth(now.getMonth() + 1) //6-31  7-1
            initCalendar()
        })

        function initCalendar() {
            $('.content').empty()
            let month = now.getMonth() + 1
            let year = now.getFullYear()

            switch (month) {
                case 1:
                case 3:
                case 5:
                case 7:
                case 8:
                case 10:
                case 12:
                    totalDays = 31;
                    break;
                case 4:
                case 6:
                case 9:
                case 11:
                    totalDays = 30;
                    break;
                default:
                    if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
                        totalDays = 29;
                    } else {
                        totalDays = 28;
                    }
                    break;
            }

            for (let i = 1; i <= totalDays; i++) {
                let li = $('<li/>').text(i)
                if (i === today && year === global_year && month === global_month) li.addClass('active')
                $('.content').append(li)
            }

            now.setDate(1)
            let firstDay = now.getDay()
            for (let i = 0; i < firstDay; i++) {
                now.setDate(now.getDate() - 1)
                let li = $('<li/>').text(now.getDate()).addClass('disabled')
                $('.content').prepend(li)
            }
            now.setDate(now.getDate() + firstDay)

            now.setDate(totalDays)

            let lastDay = 6 - now.getDay()
            for (let i = 0; i < lastDay; i++) {
                now.setDate(now.getDate() + 1)
                let li = $('<li/>').text(now.getDate()).addClass('disabled')
                $('.content').append(li)
            }

            now.setDate(now.getDate() - lastDay)
            now.setDate(1)
        }

        initCalendar()
    })