js实现日历

html

<div class="rili">
            <div class="Calendar">
                <div id="row1">
                    <div>一</div>
                    <div>二</div>
                    <div>三</div>
                    <div>四</div>
                    <div>五</div>
                    <div>六</div>
                    <div>日</div>
                </div>
                <div id="row2">
                </div>
                <div id="row3">
                </div>
                <div id="row4">
                </div>
                <div id="row5">
                </div>
                <div id="row6">
                </div>
                <div id="row7">
                </div>
            </div>
        </div>

css样式

.Calendar {
        margin: 10px;
        width: 420px;
        height: 380px;
        background-color: #fff;
        box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
        border-radius: 10px;
    }

    .Calendar>div {
        display: flex;
        height: 54px;
        justify-content: space-around;
    }

    .Calendar>div>div {
        border-radius: 50%;
        text-align: center;
        line-height: 52px;
        border: 0.2px solid rgba(200, 200, 200, 0);
        width: 54px;
        height: 54px;
    }

    .Calendar>div:not(:first-child)>div:hover {
        background-color: #eee;
    }

    #row1 {
        background-color: #1773C4;
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        color: #fff;
    }

    #time {
        text-align: center;
        margin-bottom: 10px;
    }

js

        //每月天数
        let fullDaysArr = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
        //当前时间
        let nowDate = new Date()
        let timeSpan = document.getElementsByTagName("span")[0]
        timeSpan.innerText = nowDate.toLocaleDateString()
        //判断今年是否是闰年
        isLeapYear(nowDate.getFullYear()) == 1 ? fullDaysArr[1] += 1 : fullDaysArr[1] = 28
        //上月时间
        let lastDate = new Date(nowDate.getFullYear(), nowDate.getMonth() - 1, fullDaysArr[nowDate.getMonth() - 1])
        //下月时间
        let nextDate = new Date(nowDate.getFullYear(), nowDate.getMonth() + 1, 1)
        //每行div的id
        let eleIds = ['row2', 'row3', 'row4', 'row5', 'row6', 'row7']
        //eleIds下标
        let j = 0
        //计数总共添加了多少个子元素
        let total = 0
        //计数每行添加了多少个子元素
        let count = 0
        //foreachDate被调用了几次
        let k = 0;
        function updateDate(num) {
            nowDate.setMonth(nowDate.getMonth() + num)
            lastDate = new Date(nowDate.getFullYear(), nowDate.getMonth() - 1, fullDaysArr[nowDate.getMonth() - 1])
            if (nowDate.getMonth() == 1) {
                fullDaysArr[1] = 28
                isLeapYear(nowDate.getFullYear()) == 1 ? fullDaysArr[1] += 1 : fullDaysArr[1] = 28
            }
            generateCalendar('removeChildren')
            timeSpan.innerText = nowDate.toLocaleDateString()
        }
        //切换到上个月
        function switchLastMonth() {
            updateDate(-1)
        }
        //切换到下个月
        function switchNextMonth() {
            updateDate(1)
        }
        //清空所有日历元素
        function clearCalendar() {
            let eles = getCalendar()
            eles.forEach(e => {
                e.remove()
            })
        }
        //获取标签元素
        function $(eleName) {
            return document.getElementById(eleName);
        }
        //为每个日历元素添加点击事件
        function addEvent(elements) {
            //记录上一个点击事件的信息
            let temp, color, border
            //为每一个日历时间元素添加点击事件
            for (let index = 0; index < elements.length; index++) {
                elements[index].addEventListener('click', function (event) {
                    if (temp) {
                        temp.target.style.border = border
                        temp.target.style.color = color
                    }
                    if (!temp || temp.target != event.target) {
                        temp = event, color = event.target.style.color, border = event.target.style.border
                        event.target.style.border = "0.2px solid black"
                        event.target.style.color = "#fff"
                    }

                })
            }
        }
        //判断是否是闰年
        function isLeapYear(year) {
            return (year % 400 == 0 || (year % 4 == 0 && year % 100 != 0)) ? 1 : 0
        }
        //遍历日期
        function foreachDate(numDay, flag = 0) {
            // debugger
            k++
            if (flag != -1) {
                for (let i = 1; i <= numDay; i++) {
                    let Div = document.createElement('div')
                    Div.innerText = i
                    if (i == nowDate.getDate()) {
                        Div.style.background = "#1773C4"
                        Div.style.color = "#fff"
                    }
                    if (k == 3) {
                        Div.style.color = "#fff"
                    }
                    count++, total++
                    $(eleIds[j]).appendChild(Div)
                    if (count == 7) {
                        j++, count = 0
                    }
                }
            } else {
                for (let i = numDay - 1; i >= 0; i--) {
                    let Div = document.createElement('div')
                    Div.innerText = lastDate.getDate() - i
                    Div.style.color = "rgb(128, 128, 128, 0.5)"
                    total++, count++
                    $(eleIds[j]).appendChild(Div)
                    if (count == 7) {
                        j++, count = 0
                    }
                }
            }

        }
        //生成日期
        function generateCalendar(mode = 'appendChild') {
            // debugger
            if (mode == 'removeChildren') {
                clearCalendar()
            }
            //上月
            foreachDate(lastDate.getDay() == 0 ? 0 : lastDate.getDay(), -1)
            //当月
            foreachDate(fullDaysArr[nowDate.getMonth()])
            //下月
            foreachDate(42 - total)
            j = 0, total = 0, count = 0, k = 0, n = 0
            //获取所有日历时间元素
            let elements = getCalendar()
            //添加点击事件
            // addEvent(elements)
        }
        //获取所有日历元素
        function getCalendar() {
            return document.querySelectorAll('div.Calendar>div:not(:first-child)>div')
        }
        window.onload = function () {
            generateCalendar()
        }