日历 

<body>
    <table>
        <thead>
            <tr>
                <th>周天</th>
                <th>周一</th>
                <th>周二</th>
                <th>周三</th>
                <th>周四</th>
                <th>周五</th>
                <th>周六</th>
            </tr>
        </thead>
        <tbody id="tb"></tbody>
    </table>

    <div>
        <span class="prev">&lt;</span>
        <span class="next">&gt;</span>
    </div>

    <p></p>

    <script>
        // 获取现在的日期
        var date = new Date();
        // 获取年份
        var year = date.getFullYear();
        // 获取月份
        var month = date.getMonth();
        // 获取日期
        var day = date.getDate();
        // 获取tbody
        var tb = document.querySelector("#tb");
        // 获取显示年月的p
        var ym = document.querySelector("p");

        // 判断闰年
        function leapYear(y) {
            return (y % 4 == 0 && y % 100 != 0 || y % 400 == 0) ? 1 : 0;
        }

        // 渲染到页面上:  封装draw函数
        function draw(year, month) {
            // 得到当月第一天为周几
            var d = new Date();
            d.setFullYear(year, month, 1);
            var firstday = d.getDay();

            // 存放当前年每月份的天数
            var DayArr = [31, 28 + leapYear(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

            // 获取当前月的天数
            var month_day_num = DayArr[month];
            // 获取当月天数所占的表格行数
            var tr_num = Math.ceil(((month_day_num + firstday) / 7));

            var res = '';
            for (let i = 0; i < tr_num; i++) {
                res += "<tr>";
                if (i == 0) {
                    for (let j = 0; j < 7; j++) {
                        // 计算每个格子日期
                        var idx = (i * 7 + j) - firstday + 1;
                        (j < firstday)? res+="<td></td>" : res += "<td>"+ idx +"</td>";
                    }
                }
                else {
                    for (let j = 0; j < 7; j++) {
                        // 存放日期
                        var idx = i * 7 + j - firstday + 1;
                        (idx <= month_day_num)? res +="<td>"+idx+"</td>" : res+="<td></td>";
                    }

                }
                res += "</tr>";
            }
            tb.innerHTML = res;
            ym.innerHTML = (Number(year)) + "年" + Number(month + 1) + "月" + Number(day) + "日";
        }

        draw(year, month);

        // 获取prev和next
        var prev = document.querySelector(".prev");
        var next = document.querySelector(".next");

        prev.addEventListener('click', function () {
            if (month > 0) {
                month--;
                draw(year, month);
            } else {
                month = 11;
                year--;
                draw(year, month);
            }
        })
        next.addEventListener('click', function () {
            if (month < 11) {
                month++;
                draw(year, month);
            } else {
                month = 0;
                year++;
                draw(year, month);
            }
        })

    </script>
</body>

 

posted @ 2021-12-18 14:31  4zero4NotFound  阅读(28)  评论(0)    收藏  举报