JavaScript日历案例

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    #calendar {
        width: 420px;
        height: auto;
        overflow: hidden;
        border: 1px solid red;
        margin: 200px auto;

    }

    #calendar .head {
        display: flex;
        height: 40px;
        line-height: 40px;
    }

    #calendar .head a {
        flex: 1;
        text-align: center;
        cursor: pointer;
    }

    #calendar .head span {

        flex: 10;
        text-align: center;
    }

    #calendar .lhead {
        display: flex;
        height: 35px;
        line-height: 35px;
    }

    #calendar .lhead>* {
        flex: 1;
        text-align: center;

    }

    /* #calendar .dlist {
        color: black;
    } */

    #calendar .dlist a {
        display: block;
        width: 60px;
        height: 60px;
        overflow: hidden;
        line-height: 60px;
        text-align: center;
        float: left;
    }

    .tmp {
        color: red;
    }

    .now {
        background-color: blueviolet;
    }
</style>

<body>
    <div id="calendar">
        <div class="head">
            <a id="prev"><</a>
            <span id="showDowDate">2022/4/7</span>
            <a id="next">></a>
        </div>
        <div class="lhead">
            <span>日</span>
            <span>一</span>
            <span>二</span>
            <span>三</span>
            <span>四</span>
            <span>五</span>
            <span>六</span>
        </div>
        <div class="dlist" id="dlist"></div>
    </div>

    <script>
        let date = new Date();
        let DateList = document.getElementById('dlist');
        let Prev = document.getElementById('prev');
        let Next = document.getElementById('next');

        setNowDate();

        Prev.onclick = function () {
            date = getPreviousMonth();
            setNowDate();

        }

        Next.onclick = function () {
            date = getNextMonth();
            setNowDate();
        }


        //设置显示抬头年月信息 
        function setDowDate() {
            let dateString = date.getFullYear() + '年' + (fullZero(date.getMonth() + 1)) + '月';
            document.getElementById('showDowDate').textContent = dateString;
           
        }
        //补零函数
        function fullZero(num) {
            return num >= 10 ? num : '0' + num;
        }

        //显示当月日期
        function setNowDate() {
            setDowDate()
            document.getElementById('dlist').textContent = '';

            //获取当月 1号 的星期
            let firstDayOfNowMonth = getWeekOfDate(date.getFullYear() + '-' + (date.getMonth() + 1) + '-1');
           
            let previousMonthDay = getPreviousMonth().getDate();



            //补前
            for (let d = (previousMonthDay - firstDayOfNowMonth + 1); d <= previousMonthDay; d++) {
                DateList.innerHTML += `<a class="tmp">${d}</a>`;
               // console.log(`${d}`);

            }
            //遍历从1 号至最后一天
            let lastDayOfNowMonth = getLastDayOfMonth();
            for (let d = 1; d <= lastDayOfNowMonth; d++) {
                let isNowDay = (d == date.getDate()) ? 'now' : '';
                DateList.innerHTML += `<a class="${isNowDay}">${d}</a>`;
            }
            //补后
            let lastDayWeek = getWeekOfDate(date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + lastDayOfNowMonth);
       
            let tmp = (lastDayWeek == 6) ? 7 : 6 - lastDayWeek;

            for (let d = 1; d <= tmp; d++) {
              
                DateList.innerHTML += `<a class="tmp">${d}</a>`;

            }
        }

        //获取星期
        function getWeekOfDate(date) {
            return new Date(date).getDay();
        }

        //获取某月最后一天

        function getLastDayOfMonth(d) {
            if (!d) d = date;
            let year = d.getFullYear(),
                month = d.getMonth() + 1,
                day = 0;

            switch (month) {
                case 4:
                case 6:
                case 9:
                case 11:
                    day = 30;
                    break;
                case 2:
                    if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
                        day = 29;
                    } else {
                        day = 28;
                    }
                    break;
                default:
                    day = 31;
            }
            return day;
        }
        //前一个月
        function getPreviousMonth() {
            let nowMonth = date.getMonth() + 1;
            let dateObj = null;
            let tmpMonth = (nowMonth == 1) ? 12 : nowMonth - 1;
            let tmpYear = (nowMonth == 1) ? date.getFullYear() - 1 : date.getFullYear();

            dateObj = new Date(tmpYear + '-' + tmpMonth + '-1');
            let lastDay = getLastDayOfMonth(dateObj);
            return new Date(`${tmpYear}-${tmpMonth}-${lastDay}`);

        }
        //下个月
        function getNextMonth() {
            let nowMonth = date.getMonth() + 1;
            let dateObj = null;
            let tmpMonth = (nowMonth == 12) ? 1 : nowMonth + 1;
            let tmpYear = (nowMonth == 12) ? date.getFullYear() + 1 : date.getFullYear();

            let lastDay = getLastDayOfMonth(dateObj);
            return new Date(`${tmpYear}-${tmpMonth}-${lastDay}`);
        }
    </script>
</body>

</html>
在这里插入图片描述
JavaScript日历案例

JavaScript日历案例

猜你喜欢
