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

文件：index.htm

  1. <!DOCTYPE html>
  2.  
  3. <head>
  4.     <meta charset="utf8">
  5.     <title>日历例子</title>
  6.     <script src="calendar.js"></script>
  7. </head>
  8.  
  9. <body>
  10.     <div id="main"><!-- 日历 --></div>
  11.     <script>
  12.         'use strict';
  13.         {
  14.             let rili = new Calendar({
  15.                 container: 'main',
  16.             });
  17.             rili.show(11);  // 12 月份
  18.         }
  19.     </script>
  20.  
  21. </body>
  22.  
  23. </html>

文件：calendar.js

  1. 'use strict';
  2. class Calendar {
  3.  
  4.     /**
  5.      * 构造函数
  6.      * @param {string} containerId 容器Id
  7.      * @param {number} year 年份
  8.      */
  9.     constructor({ container, year = new Date().getFullYear() }) {
  10.         this.year = year;
  11.         this.container = document.getElementById(container);
  12.     }
  13.  
  14.     /**
  15.      * 日历数据
  16.      * @param {number} month 月份
  17.      * @returns {array} 6行7列 日期  0~6 表示：星期天 ~ 星期六
  18.      */
  19.     data(month) {
  20.         let week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'], arr = [];
  21.         let date = new Date(this.year, month), days = this.getDays(month);
  22.         for (let x = 0, day = 1; x < 6; x++) {
  23.             arr[x] = new Array(7).fill(null);
  24.             for (let y = x ? 0 : date.getDay(); y < 7 && day <= days; y++ , day++) {
  25.                 arr[x][y] = day;
  26.             }
  27.         }
  28.         arr.unshift(week)
  29.         return arr;
  30.     }
  31.  
  32.     /**
  33.      * 显示日历
  34.      * @param {number} month 月份
  35.      */
  36.     show(month) {
  37.         let data = this.data(month);
  38.         let table = document.createElement('table'), tr, td, text;
  39.         table.border = 1;
  40.         for (let x = 0; x < data.length; x++) {
  41.             tr = document.createElement('tr');
  42.             table.appendChild(tr);
  43.             for (let y = 0; y < data[x].length; y++) {
  44.                 td = document.createElement('td');
  45.                 td.height = 24;
  46.                 text = document.createTextNode(data[x][y] || " ");   // 创建文本节点
  47.                 td.appendChild(text);
  48.                 tr.appendChild(td);
  49.             }
  50.         }
  51.         this.container.appendChild(table);
  52.     }
  53.  
  54.     /**
  55.      * 当月天数
  56.      * @param {number} num  月份
  57.      * @returns {number} 天数
  58.      */
  59.     getDays(num) {
  60.         const month = [31, this.isLeapYear() ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
  61.         return month[num];
  62.     }
  63.  
  64.     /**
  65.      * 是否润年
  66.      * @returns {bool}
  67.      */
  68.     isLeapYear() {
  69.         let year = this.year;
  70.         return ((year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0)) ? true : false;
  71.     }
  72. }

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. 我的书单(Book List)

    code[class*="language-"], pre[class*="language-"] { background-color: #fdfdfd; - ...

  2. 探秘JS的异步单线程

    对于通常的developer(特别是那些具备并行计算/多线程背景知识的developer)来讲,js的异步处理着实称得上诡异.而这个诡异从结果上讲,是由js的“单线程”这个特性所导致的. 我曾尝试用“ ...

  3. 微信小程序实现显示和隐藏控件-头像-取值-bindblur事件

    微信小程序实现显示和隐藏控件 .wxml: <view class=" {{showOrHidden?'show':'hidden'}}"></view> ...

  4. python面试中被问的最多的10道题

    1 性能: 解析下面代码慢在哪里def strtest1(num):str='first'for i in range(num):str+="X"return str解析:pyth ...

  5. jQuery源码——.html()方法原理解析

    在将字符串转化为html碎片时,一般会将字符串作为容器的innerHTML属性赋值.但innerHTML有很多局限性,比如我们想转化的字符串中有<script>标签并且包含一个立即执行的函 ...

  6. logstash解耦之redis消息队列

    logstash解耦之redis消息队列 架构图如下: 说明:通过input收集日志消息放入消息队列服务中(redis,MSMQ.Resque.ActiveMQ,RabbitMQ),再通过output ...

  7. Chapter 4 Invitations——7

    The next day, I was surprised that Jessica wasn't her usual gushing self in Trig and Spanish. 第二天,我很 ...

  8. Spring AOP实战例子与springmvc整合不起效果的解决办法

    在使用AOP之前,首先我们先了解一下什么是AOP吧.在网上很多人将AOP翻译为“面向切面编程”,什么是面向切面?与面向对象有什么区别呢? 在回答这两个问题之前,我们先要明白切面的概念. 切面由切点与增 ...

  9. ajax实现文档导出及下载

    做导出一直遇到个问题就是不能用ajax实现一步导出文档,即导出加下载.今天突然想到可以分开来做就上网搜了下,发现一篇比较不错的文章(http://www.cnblogs.com/zj0208/p/59 ...

  10. win32线程

    win32线程 一丶什么是线程 在windows中常听到的就是线程.多线程.啊什么的. 这里介绍一下什么是线程. 1.线程是附属在进程中的一个执行实体.简而言之就是执行代码的. 2.每个进程至少有一个 ...