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

    }

}

js 简单日历的更多相关文章

  1. js超简单日历

    用原生js写了一个超级简单的日历.当做是练习js中的Date类型. 思路: 获取某个日期,根据年份计算出每个月的天数. 利用Date中的getDay()知道该月份的第一天为星期几. 循环创建表格,显示 ...

  2. 一个js简单的日历显示效果的函数

    用一个函数简单的实现一个月份的日历,效果如下: 这个日历效果有高亮显示,我实现的思维比较简单. 我把上面的日历效果用表格table生成,分成两个部分. 第一个部分:就是前面的第一排,我用一行<t ...

  3. js编写当天简单日历

    之前一直很想用javascript写一个日历,但是因为完全没有好的思路, 所以迟迟没有尝试.最近在网上刚好看到用javascript编写的简单日历的例子,代码量虽然不大, 但是我觉得很好地阐述了js日 ...

  4. JS写一个简单日历

    JS写一个日历,配合jQuery操作DOM <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

  5. JS框架_(Laydate.js)简单实现日期日历

    百度云盘 传送门 密码:71hf JavaScript日期与时间组件_____laydate.js 日期日历效果: <!DOCTYPE html> <html> <hea ...

  6. 2.23 js处理日历控件（修改readonly属性）

    2.23 js处理日历控件(修改readonly属性) 前言    日历控件是web网站上经常会遇到的一个场景,有些输入框是可以直接输入日期的,有些不能,以我们经常抢票的12306网站为例,详细讲解如 ...

  7. [JS,Canvas]日历时钟

    [JS,Canvas]日历时钟 Html: <!doctype html> <html> <head> <meta charset="UTF-8&q ...

  8. js简单 图片版时钟，带翻转效果

    js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  9. js简单操作Cookie

    贴一段js简单操作Cookie的代码: //获取指定名称的cookie的值 function getCookie(objName) { var arrStr = document.cookie.spl ...

随机推荐

  1. Vue实现懒加载的基本思路

    懒加载是前端开发者的基本功之一.实现懒加载肯定是要直接操作DOM的,这个没得跑,但我们可以想办法让流程尽可能优雅些. 基本结构 父组件是列表容器,子组件是列表中的项,如卡片.帖子等,承载图片的DOM对 ...

  2. IM开发基础知识补课(五)：通俗易懂，正确理解并用好MQ消息队列

    1.引言 消息是互联网信息的一种表现形式,是人利用计算机进行信息传递的有效载体,比如即时通讯网坛友最熟悉的即时通讯消息就是其具体的表现形式之一. 消息从发送者到接收者的典型传递方式有两种: 1)一种我 ...

  3. FFmpeg开发实战（一）：FFmpeg 打印日志

    在Visual Studio 开发(二):VS 2017配置FFmpeg开发环境一文中,我们配置好了FFmpeg的开发环境,下面我们开始边实战,边学习FFmpeg. 首先,我们要学习的就是FFmpeg ...

  4. ubuntu在终端下复制粘贴的2种方法

    最近因为项目需要在ubuntu环境下开发(我是用的unbantu虚拟环境),经常要在终端下手动输入很长的文件路径,觉得很麻烦,就谷歌了2种方法如下 你可能会问,什么是ubuntu? 简单来说就是一个基 ...

  5. 阿里巴巴是如何打通 CMDB，实现就近访问的？

    CMDB在企业中,一般用于存放与机器设备.应用.服务等相关的元数据.当企业的机器及应用达到一定规模后就需要这样一个系统来存储和管理它们的元数据.有一些广泛使用的属性,例如机器的IP.主机名.机房.应用 ...

  6. Redis Linux 安装运行实战全记录

    下载Redis 去Redis官网下载最新的Linux包,Redis官方没有Windows版的下载. https://redis.io/ 下载后把包上传到Linux服务器. 安装Redis 1.解压Re ...

  7. 一看看懂Protocol Buffer（协议篇）

    前言 由于笔者业团队的业务对即时通讯服务有很大的依赖,春节结束后的第一天,红包没到,产品同学先到了,产品同学和我说要做一款IM,看到需求文档后和设计图后笔者大吃一斤 这不就是一个翻版的web qq吗? ...

  8. Python 中的object takes no parameters错误

    Python是一门面向对象的语言,中我们首先创建一个类: class Student(object): def _init_(self,name,score): self.name = name se ...

  9. Api 文档管理系统 RAP2 环境搭建

    Api 文档管理系统 RAP2 环境搭建  发表于 2018-03-27 |  分类于 Api |  评论数: 4|  阅读次数: 4704  本文字数: 4.8k |  阅读时长 ≍ 9 分钟 RA ...

  10. c#使用dynamic关键字传输数据的用法

    问: 在实际开发中,特别是在ORM框架的基础下,我们返回的数据都是强类型的实体对象.如果是单表查询我们就可以直接返回对应的实体,如果是多表联合查询,我们可能就需要各个表中都返回一部分字段,组成一个新的 ...