创建日历

jq-创建日历

<style>
        *{
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        li.disable{
            background-color: #ccc;
            cursor: not-allowed;
        }
        .container{
            width: 350px;
            border: 1px solid #ccc;
            margin: 50px;
        }
        .container li{
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            cursor: pointer;
        }
        .container li:not(.disable):hover{
            background-color: lightcyan;
        }
        .container ul{
            display: flex;
            flex-wrap: wrap;
        }
        
        li.active{
            background-color: lightgreen;
            color: #fff;
        }
        button{
            margin: 30px 0 0 50px;
        }
    </style>

<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.min.js"></script>
    <script>
        $(function(){

            let totaDays = 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)
                initCalendar()
            })

            $('.next').click(function (){
                now.setMonth(now.getMonth() + 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:
                        totaDays = 31
                        break;
                    case 4:
                    case 6:
                    case 9:
                    case 11:
                        totaDays = 30
                        break;
                    default:
                        if((year % 4 === 0 && year % 100 != 0) || year % 400 === 0){
                            totaDays = 29
                        }else {
                            totaDays = 28
                        }
                        break;
                }   
            
                for (let i = 1; i <=totaDays; 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('disable')
                    $('.content').prepend(li)  // 在content前面插入节点li
                }

                now.setDate(now.getDate() + firstDay)
                now.setDate(totaDays)

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

                now.setDate(now.getDate() - lastday)
                now.setDate(1)

            }
            initCalendar()
            
            
        })
    </script>