日历进化版

<style>
    * {
        margin: 0;
        padding: 0;
    }

    h1 {
        width: 700px;
        margin: 100px auto 10px;
    }

    div {
        width: 700px;
        min-height: 30px;
        margin: 0 auto;
    }

    #hd {
        width: 700px;
        height: 30px;
        display: flex;
        justify-content: space-between;
    }

    #hd li {
        width: 100px;
        height: 30px;
        list-style: none;
        background-color: #000;
        color: #fff;
        text-align: center;
        line-height: 30px;
    }

    #list {
        width: 700px;
        min-height: 30px;
        display: flex;
        flex-wrap: wrap;
    }

    #list li {
        box-sizing: border-box;
        width: 100px;
        height: 30px;
        background-color: #000;
        list-style: none;
        text-align: center;
        line-height: 30px;
        color: #fff;
    }

    p {
        width: 700px;
        margin: 10px auto 0;
        display: flex;
        justify-content: space-between;
    }

    p span {
        font-size: 30px;
        cursor: pointer;
    }
</style>

<body>
    <p id="ym"></p>
    <p id="time"></p>
    <div>
        <ul id="hd">
            <li>星期一</li>
            <li>星期二</li>
            <li>星期三</li>
            <li>星期四</li>
            <li>星期五</li>
            <li>星期六</li>
            <li>星期天</li>
        </ul>
        <ul id="list">
        </ul>
    </div>
    <p>
        <span class="prev">&lt;</span>
        <span class="next">&gt;</span>
    </p>

    <script>
        var ym = document.querySelector("#ym");
        var time = document.querySelector("#time");
        var list = document.querySelector('#list');
        var prev = document.querySelector(".prev");
        var next = document.querySelector(".next");

        var date = new Date();
        // 获取年月日
        var y1 = date.getFullYear();
        var m1 = date.getMonth();
        var d1 = date.getDate();
        // 初始化页面
        timerShow();
        yearMonth();
        draw(date);

        // 定时更新时间
        setInterval(function () {
            timerShow();
        }, 1000)

        // 上个月
        prev.addEventListener('click', function () {
            date.setDate(0);
            yearMonth();
            draw();
        })
        // 下个月
        next.addEventListener('click', function () {
            date.setDate(33);
            yearMonth();
            draw();
        })

        // 渲染页面
        function draw() {
            var res = '';
            // 获取更改后的年月日
            var y2 = date.getFullYear();
            var m2 = date.getMonth();
            var d2 = date.getDate();
            var NowDayArr = getNowDays(date);
            var PrevDayArr = getPrevDays(date);
            PrevDayArr.forEach(function (v) {
                res += `<li style = "color: #666">${v}</li>`
            });
            NowDayArr.forEach(function (i, v) {
                if (y1 === y2 && m1 === m2  && v === d1) {
                    res += `<li style = "border:1px solid red">${v}</li>`;
                }else{
                    res += `<li>${v}</li>`;
                }
            });
            for (let i = 1; i < 42 - (PrevDayArr.length + NowDayArr.length) + 1; i++) {
                res += `<li style = "color: #666">${i}</li>`
            }

            list.innerHTML = res;
        }

        // 获取当前月的天数并存放
        function getNowDays(time) {
            var arr = [];
            var date = new Date(time);
            date.setDate(32);
            date.setDate(0);
            var MaxDay = date.getDate();
            for (let i = 1; i < MaxDay + 1; i++) {
                arr.push(i);
            }
            // 获取年和月
            year = date.getFullYear();
            month = date.getMonth() + 2;
            return arr;
        }

        // 获取上个月的天数并存放
        function getPrevDays(time) {
            var date = new Date(time);
            // 获取本月第一天周几
            date.setDate(1);
            var week = date.getDay();
            if (week === 0) {
                week = 7;
            }
            // 获得上个月的天数
            var arr = [];
            date.setDate(0);
            var MaxDay = date.getDate();
            // 获取年和月
            year = date.getFullYear();
            month = date.getMonth() + 2;
            for (let i = MaxDay - week + 2; i < MaxDay + 1; i++) {
                arr.push(i);
            }
            return arr;
        }

        // 封装年月
        function yearMonth() {
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var ymStr = "";
            ymStr += year + "-";
            ymStr += month < 10 ? "0" + month : month;
            ym.innerHTML = ymStr;
        }
        // 封装时间
        function timerShow() {
            var date = new Date();
            var result = "";
            date.getHours() < 10 ? result += "0" + date.getHours() + ":" : result += date.getHours() + ":";
            date.getMinutes() < 10 ? result += "0" + date.getMinutes() + ":" : result += date.getMinutes() + ":";
            date.getSeconds() < 10 ? result += "0" + date.getSeconds() : result += date.getSeconds();
            time.innerHTML = result;
        }
    </script>
</body>
posted @ 2021-12-21 11:16 4zero4NotFound 阅读(37) 评论(0) 收藏举报
刷新页面返回顶部
4zero4NotFound

one more time、one more change.

日历进化版

公告
