js 简单日历
Posted 破壳而出的蝌蚪
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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;
}
}
以上是关于js 简单日历的主要内容，如果未能解决你的问题，请参考以下文章