js——制作日历 二维数组定义方法

版权声明：转发博客 请注明出处 否则必究 https://blog.csdn.net/lucky541788/article/details/82183843

制作日历

js部分

        window.onload = function () {
            //判断闰年
            function checkYear(_year) {
                if (_year % 400 === 0 || (_year % 4 === 0 && _year % 100 !== 0)) {
                    return true;
                }
            }

            //判断某年某月的第一天是星期几
            function getFirstDay(year, month) {
                var allDays;
                var y = year - 1;
                allDays = y + Math.floor(y / 4) - Math.floor(y / 100) + Math.floor(y / 400) + 1; //牛逼的公式 没看懂 看懂的可以留言解释一下
                for (var i = 1; i < month; i++) {
                    switch (i) {
                        case 1:
                            allDays += 31;
                            break;
                        case 2:
                            if (checkYear(year)) {
                                allDays += 29;
                            } else {
                                allDays += 28;
                            }
                            break;
                        case 3:
                            allDays += 31;
                            break;
                        case 4:
                            allDays += 30;
                            break;
                        case 5:
                            allDays += 31;
                            break;
                        case 6:
                            allDays += 30;
                            break;
                        case 7:
                            allDays += 31;
                            break;
                        case 8:
                            allDays += 31;
                            break;
                        case 9:
                            allDays += 30;
                            break;
                        case 10:
                            allDays += 31;
                            break;
                        case 11:
                            allDays += 30;
                            break;
                        case 12:
                            allDays += 31;
                            break;
                    }
                }
                return allDays % 7;
            }

            //显示日历
            function showCalendar(year, month, day) {
                var monthDay = 0, content = [];
                var table = document.getElementById('father');
                var num = [];
                var count = 1;

                //月份对应的天数
                switch (month) {
                    case 1:
                        monthDay = 31;
                        break;
                    case 2:
                        if (checkYear(year)) {
                            monthDay = 29;
                        } else {
                            monthDay = 28;
                        }
                        break;
                    case 3:
                        monthDay = 31;
                        break;
                    case 4:
                        monthDay = 30;
                        break;
                    case 5:
                        monthDay = 31;
                        break;
                    case 6:
                        monthDay = 30;
                        break;
                    case 7:
                        monthDay = 31;
                        break;
                    case 8:
                        monthDay = 31;
                        break;
                    case 9:
                        monthDay = 30;
                        break;
                    case 10:
                        monthDay = 31;
                        break;
                    case 11:
                        monthDay = 30;
                        break;
                    case 12:
                        monthDay = 31;
                        break;
                }

                //获取第一天
                var firstDay = getFirstDay(year, month);
                var tr = Math.ceil((monthDay + firstDay) / 7);
                var k = firstDay;

                //获取日历样式数组保存的数据
                for (var j = 0; j < tr; j++) {
                    num[j] = new Array(7);
                    do {
                        if (count <= monthDay) {
                            num[j][k] = count;
                            k++;
                            count++;
                        } else {
                            break;
                        }
                    } while (k < 7);
                    k = 0;
                }

                //创建日历内容
                for (var e = 0; e < tr; e++) {
                    content[e] = '<tr>\n' +
                        '        <td>' + num[e][0] + '</td>\n' +
                        '        <td>' + num[e][1] + '</td>\n' +
                        '        <td>' + num[e][2] + '</td>\n' +
                        '        <td>' + num[e][3] + '</td>\n' +
                        '        <td>' + num[e][4] + '</td>\n' +
                        '        <td>' + num[e][5] + '</td>\n' +
                        '        <td>' + num[e][6] + '</td>\n' +
                        '    </tr>';
                }
                var str = content.join('');
                str = str.replace(/undefined/g, '');

                //输出日历表格
                table.innerHTML = '    <caption>' + year + '-' + month + '-' + day + '</caption>\n' +
                    '    <thead>\n' +
                    '    <tr>\n' +
                    '        <td>日</td>\n' +
                    '        <td>二</td>\n' +
                    '        <td>三</td>\n' +
                    '        <td>四</td>\n' +
                    '        <td>五</td>\n' +
                    '        <td>六</td>\n' +
                    '        <td>一</td>\n' +
                    '    </tr>\n' +
                    '    </thead>\n' +
                    '    <tbody id="todayStyle">\n' +
                    '    ' + str + '\n' +
                    '    </tbody>';

                //设置当天的样式
                var td = (day + firstDay) % 7 === 0 ? 6 : (day + firstDay) % 7-1;

                var todayStyle = document.getElementById('todayStyle').children[Math.ceil((day + firstDay) / 7-1)].children[td];
                todayStyle.style.backgroundColor = '#111';
                todayStyle.style.borderRadius = '10px';
            }

            //设置时间
            var content = document.getElementById('content');
            var btn = document.getElementById('btn');
            btn.onclick = function () {
                var text = content.value;
                if (text.match(/[0-9]{4}\s{1,100}[0-9]{1,2}\s{1,100}[0-9]{1,2}/g) && Number(text.slice(0, 4)) > 1971) {
                    var arr = text.split(' ');
                    showCalendar(Number(arr[0]), Number(arr[1]), Number(arr[2]));//查找时间
                } else {
                    alert('输出格式错误 参见：2018 3 5');
                }
                content.value = '';
            };
            var date = new Date();
            showCalendar(date.getFullYear(), date.getMonth() + 1, date.getDate());//默认今天的日期
        }

css部分

        table {
            margin: 60px auto;
            text-align: center;
            background-color: #555;
            border-radius: 20px;
            padding: 20px;
        }

        table > caption {
            font-size: 30px;
            color: #ccc;
            margin-bottom: 20px;
        }

        thead > tr > td {
            width: 100px;
            height: 70px;
            font-size: 20px;
            font-weight: bold;
            color: #cee;
        }

        tbody > tr > td {
            width: 100px;
            height: 40px;
            color: #ece;
        }

        body {
            text-align: center;
        }

        label {
            font-size: 20px;
            color: #888;
        }

        label input{
            height: 30px;
            margin: 20px;
            font-size: 20px;
            text-align: center;
            color: #888;
        }
        label:first-child input {
            width: 200px;
        }
        label:last-child input{
            width: 80px;
            height: 40px;
        }
        label input::placeholder {
            color: #CCCCCC;
        }

html部分

<table id="father"></table>
<label>请输出查找日期:<input type="text" placeholder="（ 例如：2018 3 5 ）" id="content"></label>
<br>
<label><input type="button" value="确定" id="btn"></label>

二维数组定义方法

        var arr=[];
        for(var i=0;i<num1;i++){
            arr[i]=[];
            for(var j=0;j<num2;j++){
                console.log(arr[i][j]);
            }
        }