js 简单日历

源地址：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; } }

猜你喜欢