xiaodai2022
/
report-form-h5


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日历</title>
    <style>
        table {
            width: 320px;
            background: #333;
            color: #fff
        }

        td,
        th {
            text-align: center;
            height: 30px;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th colspan="2">
                    <span class="left">
                        <<
                            </span>
                </th>
                <th colspan="3">
                    <span class="time"></span>
                </th>
                <th colspan="2">
                    <span class="right">>></span>
                </th>
            </tr>
            <tr>
                <th>日</th>
                <th>一</th>
                <th>二</th>
                <th>三</th>
                <th>四</th>
                <th>五</th>
                <th>六</th>
            </tr>
        </thead>
        <tbody class="main"></tbody>
    </table>

    <script>
        // 获取元素
        let oTime = $('.time')
        let oMain = $('.main')
        let leftBtn = $('.left')
        let rightBtn = $('.right')
        let time = new Date()

        createCells() // 1. 创建表格
        getPrevDays(time) // 2.获取上一个月占的格子
        getCurrentDays(time); // 3.获取当前月所占的格子数
        minHead(time) // 4.设置头部显示的内容
        mainList(time, getPrevDays(time), getCurrentDays(time)) // 5. 月份显示的详情
        leftBtn.onclick = function () { // 6.绑定两边的按钮 实现上一月下一月
            time.setMonth(time.getMonth() - 1)
            getPrevDays(time)
            getCurrentDays(time)
            minHead(time)
            mainList(time, getPrevDays(time), getCurrentDays(time))
        }
        rightBtn.onclick = function () {
            time.setMonth(time.getMonth() + 1)
            getPrevDays(time)
            getCurrentDays(time)
            minHead(time)
            mainList(time, getPrevDays(time), getCurrentDays(time))
        }
        /*
         * 
         * 获取元素 
         * 
        */
        function $(container) {
            return document.querySelector(container)
        }

        /*
        *
         * 创建表格
         * 
        */
        function createCells() {
            for (var i = 0; i < 6; i++) {
                var tr = document.createElement('tr')
                for (var k = 0; k < 7; k++) {
                    var td = document.createElement('td')
                    tr.appendChild(td)
                }
                oMain.appendChild(tr)
            }
        }

        /*
        *
        * getPrevDays 获取上一个月 占的格子
        *  
        */
        function getPrevDays(time) {
            var time = new Date(time) // 拷贝一份时间 防止修改时间引发冲突
            var list = [] // 上一个月所占的天数
            time.setDate(1) // 设置为当月第一天方便查看是星期几
            var day = time.getDay() == 0 ? 7 : time.getDay() // 如果是0 说明需要空出来一行 显示上个月的时间
            // 获取上一个月的天数
            time.setDate(0)
            var maxDay = time.getDate()
            for (var i = maxDay; i > (maxDay - day); i--) {
                list.push(i)
            }
            list.reverse()
            return list
        }

        /*
        * 获取当月所占的格子
        */
        function getCurrentDays(time) {
            // debugger
            var time = new Date(time) // 拷贝一份时间 防止修改时间造成全局时间冲突
            time.setDate(1) // 确保不会出现跨越现象 比如1.31跑到三月份去了
            var list = []
            // 下面的代码是为了获取当前月的信息
            time.setMonth(time.getMonth() + 1)
            console.log(time.getMonth())
            time.setDate(0) // 修改日期0
            var maxDay = time.getDate() // 获取当月的天数
            for (var i = 1; i <= maxDay; i++) {
                list.push(i)
            }
            return list
        }

        /*
        * minHead 设置头部的显示
        */
        function minHead(time) {
            // oTime.innerHTML = time.getFullYear() + '年' + time.getMonth() + 1
            oTime.innerHTML = `${time.getFullYear()}年${time.getMonth() + 1}月`
        }

        function getYMD(time) {
            time = time || new Date()
            return `${time.getFullYear()}-${time.getMonth() + 1}-${time.getDate()}`
        }

        /*
        * 月份显示的详情 上个月最后 + 本月 + 下个月开始的
        */
        function mainList(time, prevDays, currentDays) {
            var beforeCount = prevDays.length + currentDays.length
            var cellList = document.querySelectorAll('td')
            // 1. 展示上个月的
            for (var i = 0; i < prevDays.length; i++) {
                cellList[i].innerHTML = `<font color='red'>${prevDays[i]}</font>`
            }
            // 2. 展示本月的
            for (var i = 0; i < currentDays.length; i++) {
                if (getYMD() === getYMD(time) && currentDays[i] == time.getDate()) { // 如果是今天 展示另外一种颜色
                    cellList[i + prevDays.length].innerHTML = `<font color='yellow'>${currentDays[i]}</font>`
                } else {
                    cellList[i + prevDays.length].innerHTML = `<font color='white'>${currentDays[i]}</font>`
                }

            }
            // 3. 展示下个月的
            for (var i = 1; i < (42 - beforeCount); i++) {
                cellList[i + beforeCount - 1].innerHTML = `<font color='red'>${i}</font>`
            }
        }
    </script>
</body>

</html>