萧寂

原生日历表

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日历表</title>
    <style>
        #day,
        #week {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            /* 7 列 */
            gap: 4px;
            width: 280px;
            /* 随意调 */
        }

        #day div,
        #week div {
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <button id="addMonth">加一月</button>
    <button id="subMonth">减一月</button>
    <br>
    当前年月为:<span id="year"></span>年<span id="month"></span>月
    <br>
    <div id="week">
        <div>一</div>
        <div>二</div>
        <div>三</div>
        <div>四</div>
        <div>五</div>
        <div>六</div>
        <div>日</div>
    </div>
    <div id="day">

    </div>

    <script>
        var addMonth = document.getElementById('addMonth');
        var subMonth = document.getElementById('subMonth');
        var yearDom = document.getElementById('year');
        var monthDom = document.getElementById('month');
        var dayDom = document.getElementById('day');

        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;

        function formartData(year, month) {
            var date_01 = new Date(`${year}/${month}/01`);
            var weekday_01 = parseInt(date_01.getDay());

            var monthDays = new Date(year, month, 0).getDate();

            var mut = [];
            var max = weekday_01;
            if (weekday_01 == 0) {
                max = 7;
            }
            for (var i = 1; i < max; i++) {
                mut.push('');
            }
            for (var j = 1; j <= monthDays; j++) {
                mut.push(j);
            }
            const space_day = weekday_01 == 0 ? 6 : weekday_01 - 1

            const obj = {
                '当前年月为:': year + '-' + month,
                '当前月共有天数为:': monthDays,
                '当前月第一天星期为:': weekday_01,
                '当前月第一天需要补空格数为:': space_day,
                '当前月的数组为:': mut

            }
            console.log(obj)

            // 渲染元素(下面是元素渲染部分,如果只看逻辑看上面部分就行)
            yearDom.innerText = year;
            monthDom.innerText = month;

            let num = ''
            // 让元素补满最后一行(最后一行格子不需要补满的话可以注释掉这段逻辑)
            if (mut.length <= 35) {
                // 五行补满五行的格子
                num = 35 - mut.length
            } else {
                // 六行补满六行格子
                num = 42 - mut.length
            }
            for (var i = 0; i < num; i++) {
                mut.push('')
            }

            /* 渲染日期格子,清空旧格子,防止加减月份导致的重复渲染 */
            dayDom.innerHTML = '';
            mut.forEach(day => {
                const div = document.createElement('div');
                div.textContent = day || '';
                dayDom.appendChild(div);
            });

            // 如果需要像windows电脑那种样式,可以给dayDom添加一个class,然后给class设置样式
            // 如果想要让前后空白格子处上下月时间,则每次切换月,需要执行三次,分别是上月,本月和下月,将上月的末尾数据补到本月开头,将下月首部数据补到本月末尾即可,然后加class置灰即可
            // 总之这种方式不依赖组件,,但是需要自己处理样式,自己写逻辑,灵活性更大
            // PS:萧寂

        }

        window.onload = function () {
            // formartData(2020, 5);
            formartData(year, month);
        }

        addMonth.onclick = function () {
            month++;
            if (month > 12) {
                month = 1;
                year++;
            }
            formartData(year, month);
        }

        subMonth.onclick = function () {
            month--;
            if (month < 1) {
                month = 12;
                year--;
            }
            formartData(year, month);
        }


    </script>
</body>

</html>
原生日历表 ​

原生日历表
