js,jQuery创建日历

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

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

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

        .container li:not(.disabled):hover {
            background: rgb(44, 192, 192);
            color: #fff;
        }

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

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

        li.active {
            background: rgb(45, 217, 230);
            color: #fff;
        }

        button {
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 18px;
            background-color: rgb(218, 215, 78);
            color: #fff;
            border: none;
        }

        .btn {
            width: 250px;
            margin: 50px auto;
            display: flex;
            justify-content: space-around;
        }
    </style>
</head>

<body>
    <div class="btn">
        <button class="prev">上个月</button>
        <button class="next">下个月</button>
    </div>
    <div class="container">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ul class="day">

        </ul>
    </div>
    <script src="../JQ/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)
                initCalendar()
            })

            $('.next').click(function () {//点击获取下个月
                now.setMonth(now.getMonth() + 1)
                initCalendar()
            })

            function initCalendar() {
                $('.day').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 = $('
  • ').html(i) if (i === today && year === global_year && month === global_month) li.addClass('active') $('.day').append(li) } now.setDate(1) //将日期调至本月的一号 let firstDay = now.getDay() //获取本月一号星期 几,即前面需要补几天 for (let i = 0; i < firstDay; i++) { now.setDate(now.getDate() - 1) //得到前一天的日期,这时已经是上个月 $('.day').prepend($('
  • ').html(now.getDate()).addClass('disabled')) //补进日历 } 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) //得到后一天的日期 $('.day').append($('
  • ').html(now.getDate()).addClass('disabled')) //补进日历 } now.setDate(now.getDate()-lastDay)//设置回来当前日期 now.setDate(1) // 设置成当月的一号 } initCalendar() }) </script> </body> </html>
  • 你可能感兴趣的:(js,jQuery创建日历)