js 简单日历

2018-12-24 09:09:18来源：博客园阅读 ()

源地址：https://jingyan.baidu.com/article/546ae185fa4f721149f28cbf.htm

文件：index.htm

<!DOCTYPE html>

<head>
    <meta charset="utf8">
    <title>日历例子</title>
    <script src="calendar.js"></script>
</head>

<body>
    <div id="main"><!-- 日历 --></div>
    <script>
        'use strict';
        {
            let rili = new Calendar({
                container: 'main',
            });
            rili.show(11);  // 12 月份
        }
    </script>
   
</body>

</html>

文件：calendar.js

'use strict';
class Calendar {

    /**
     * 构造函数
     * @param {string} containerId 容器Id
     * @param {number} year 年份
     */
    constructor({ container, year = new Date().getFullYear() }) {
        this.year = year;
        this.container = document.getElementById(container);
    }

    /**
     * 日历数据
     * @param {number} month 月份
     * @returns {array} 6行7列 日期  0~6 表示：星期天 ~ 星期六
     */
    data(month) {
        let week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'], arr = [];
        let date = new Date(this.year, month), days = this.getDays(month);
        for (let x = 0, day = 1; x < 6; x++) {
            arr[x] = new Array(7).fill(null);
            for (let y = x ? 0 : date.getDay(); y < 7 && day <= days; y++ , day++) {
                arr[x][y] = day;
            }
        }
        arr.unshift(week)
        return arr;
    }

    /**
     * 显示日历
     * @param {number} month 月份
     */
    show(month) {
        let data = this.data(month);
        let table = document.createElement('table'), tr, td, text;
        table.border = 1;
        for (let x = 0; x < data.length; x++) {
            tr = document.createElement('tr');
            table.appendChild(tr);
            for (let y = 0; y < data[x].length; y++) {
                td = document.createElement('td');
                td.height = 24;
                text = document.createTextNode(data[x][y] || " ");   // 创建文本节点
                td.appendChild(text);
                tr.appendChild(td);
            }
        }
        this.container.appendChild(table);
    }

    /**
     * 当月天数
     * @param {number} num  月份
     * @returns {number} 天数
     */
    getDays(num) {
        const month = [31, this.isLeapYear() ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
        return month[num];
    }

    /**
     * 是否润年
     * @returns {bool} 
     */
    isLeapYear() {
        let year = this.year;
        return ((year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0)) ? true : false;
    }
}