首页 > 其他分享> > js写一个简单的日历
js写一个简单的日历

2020-07-02 14:05:55 作者：互联网
思路：先写一个结构和样式，然后写本月的时间，之后计算上下月份的关系
<!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;
        }
        button{
            width: 50px;

            background-color: rgb(28, 113, 224);
            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.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()
        })
    </script>
</body>

</html>
标签：case,setDate,日历,year,js,let,简单,li,now
来源： https://www.cnblogs.com/sjl9280/p/13224287.html