日历表的jq简单写法

最新推荐文章于 2021-06-03 01:50:13 发布

mardins

最新推荐文章于 2021-06-03 01:50:13 发布

阅读量238

点赞数

分类专栏： js操作dom 文章标签： jquery

本文链接：https://blog.csdn.net/mardins/article/details/107084929

版权

js操作dom 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

日历的表格简单的写法

<!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
        }

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

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

        .container ul li.title{
            margin:  0 auto;
            width: 100px;
            text-align: center;
        }

        .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 class="title"></li>
        </ul>
        <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 totalDays = 0
            let now = new Date()
            let today = now.getDate()
            let global_month = now.getMonth() + 1
            let global_year = now.getFullYear()

            $('.title').text(`${global_year}/${global_month}/${today}`)

            $('.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:
                        totalDays = 31
                        break;

                    case 4:
                    case 6:
                    case 9:
                    case 11:
                        totalDays = 30
                        break;
                    default:
                        if ((year % 4 === 0 && year % 100 !== 0) || year % 4 === 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>

mardins

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
日历表的jq简单写法

日历的表格简单的写法<!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> * {
复制链接

扫一扫

专栏目录