JS写一个简单日历

最新推荐文章于 2024-05-17 14:54:19 发布
转载最新推荐文章于 2024-05-17 14:54:19 发布 · 399 阅读
2 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/ljwk/p/10321630.html
文章标签：
#javascript #ViewUI
JS写一个日历，配合jQuery操作DOM

<!DOCTYPE html>
<html>

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

        header {
            text-align: center;
            line-height: 40px;
        }

        main {
            margin-top: 100px;
        }

        main div {
            margin: 20px;
            text-align: center;
        }

        .full-date {
            margin: 0 20px;
            vertical-align: middle;
        }

        .left,
        .right {
            border: 1px solid #add8e6;
            padding: 5px 10px;
        }

        ul {
            margin: 0 40px 10px;
        }

        ul li {
            display: inline-block;
            width: 40px;
            text-align: center;
            line-height: 40px;
        }

        .title li {
            width: 35px;
        }
    </style>
</head>

<body>
    <header>
        简单日历
    </header>
    <main>
        <div>
            <span class="left"><</span>
            <span class="full-date">2019/1/1</span>
            <span class="right">></span>
        </div>
        <ul class="title">
            <li>日</li>
            <li>一</li>
            <li>二</li>
            <li>三</li>
            <li>四</li>
            <li>五</li>
            <li>六</li>
        </ul>
        <section id="date"></section>
    </main>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.js"></script>
    <script>
        const Calendar = { // 实现日历方法
            date: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
            now: new Date(),
            result: [],
            need: false,
            init(needOther) {
                this.result = [];
                this.need = needOther;
                let data = [],
                    temp = [];
                if (this.leapYear(this.now)) { // 根据是否是闰年修改日期数组
                    this.date[1] = 29;
                } else {
                    this.date[1] = 28;
                }
                for (let i = 1; i <= this.date[this.now.getMonth()]; i++) { // 添加本月日期
                    data.push(i);
                }
                if (this.need) { // 是否需要其他日期
                    for (let i = 1; i <= this.getFirstWeek(this.now); i++) { // 添加上月日期
                        let num = 0;
                        if (this.now.getMonth() === 0) {
                            num = this.date[11];
                        } else {
                            num = this.date[this.now.getMonth() - 1];
                        }
                        data.unshift(num - i + 1);
                    }
                    for (let i = 1;; i++) { // 添加下月日期
                        if (data.length % 7 === 0) {
                            break;
                        } else {
                            data.push(i);
                        }
                    }
                } else {
                    for (let i = 1; i <= this.getFirstWeek(this.now); i++) { // 添加上月空白日期
                        data.unshift('');
                    }
                }
                for (let i = 1; i <= data.length; i++) { // 转换为二维数组
                    temp.push(data[i - 1]);
                    if (i % 7 === 0) {
                        this.result.push(temp);
                        temp = [];
                    }
                }
                this.result.push(temp);
            },
            getFirstWeek(time) { // 获取每月1号是星期几
                const date = new Date(time.getFullYear(), time.getMonth());
                return date.getDay();
            },
            leapYear(time) { // 判断闰年
                const year = new Date(time).getFullYear();
                return year % 400 === 0 || (year % 4 === 0 && year % 100 !== 0);
            },
            preMonth() { // 下个月
                if (this.now.getMonth() === 0) {
                    this.now = new Date(this.now.getFullYear() - 1, 11, this.now.getDate());
                } else {
                    this.now = new Date(this.now.getFullYear(), (this.now.getMonth()) - 1, this.now.getDate());
                }
                this.init(this.need);
            },
            nextMonth() { // 上个月
                if (this.now.getMonth() === 11) {
                    this.now = new Date(this.now.getFullYear() + 1, 0, this.now.getDate());
                } else {
                    this.now = new Date(this.now.getFullYear(), this.now.getMonth() + 1, this.now.getDate());
                }
                this.init(this.need);
            }
        }
        $(function () {
            Calendar.init();
            const render = () => {
                const nowDate = Calendar.now;
                $('.full-date').text(
                    `${nowDate.getFullYear()}/${nowDate.getMonth() + 1}/${nowDate.getDate()}`);
                Calendar.result.forEach(item => {
                    let html = '<ul>';
                    item.forEach(data => {
                        html += `<li>${data}</li>`;
                    });
                    html += '</ul>';
                    $('#date').append(html);
                });
            };
            render();
            $('.left').click(() => {
                $('#date').empty();
                Calendar.preMonth();
                render();
            });
            $('.right').click(() => {
                $('#date').empty();
                Calendar.nextMonth();
                render();
            });
        });
    </script>
</body>

</html>
转载于:https://www.cnblogs.com/ljwk/p/10321630.html