• 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;
        }
    }
  • 相关阅读:
    JavaScript 核心参考 Arguments 对象
    readonly 和 disable的区别
    Asp.net 页面导航的几种方法与比较(转)
    CSS float clear 使用
    PHP时区列表
    Jquery 父窗口中移进移出鼠标到Iframe: 移进显示更多内容, 移出隐藏部分内容
    Mysql 查看进程SQL
    好用的弹出对话框 artDialog
    In Cache 算法
    live 绑定事件会触发多次
  • 原文地址:https://www.cnblogs.com/whnba/p/10158699.html
Copyright © 2020-2023  润新知