js日历 - 掘金

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
    * {
        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;
    }
</style>
</head>

<body>
<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>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
    $(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.getMonth() - 1) //6-31  7-1now.setMonth
            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()
    })
</script>
</body>

</html>