JS写一个简单日历
JS写一个日历，配合jQuery操作DOM
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calendar</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
header {
text-align: center;
line-height: 40px;
}
main {
margin-top: 100px;
}
main div {
margin: 20px;
text-align: center;
}
.full-date {
margin: 0 20px;
vertical-align: middle;
}
.left,
.right {
border: 1px solid #add8e6;
padding: 5px 10px;
}
ul {
margin: 0 40px 10px;
}
ul li {
display: inline-block;
width: 40px;
text-align: center;
line-height: 40px;
}
.title li {
width: 35px;
}
</style>
</head>
<body>
<header>
简单日历
</header>
<main>
<div>
<span class="left"><</span>
<span class="full-date">2019/1/1</span>
<span class="right">></span>
</div>
<ul class="title">
<li>日</li>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
</ul>
<section id="date"></section>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.js"></script>
<script>
const Calendar = { // 实现日历方法
date: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
now: new Date(),
result: [],
need: false,
init(needOther) {
this.result = [];
this.need = needOther;
let data = [],
temp = [];
if (this.leapYear(this.now)) { // 根据是否是闰年修改日期数组
this.date[1] = 29;
} else {
this.date[1] = 28;
}
for (let i = 1; i <= this.date[this.now.getMonth()]; i++) { // 添加本月日期
data.push(i);
}
if (this.need) { // 是否需要其他日期
for (let i = 1; i <= this.getFirstWeek(this.now); i++) { // 添加上月日期
let num = 0;
if (this.now.getMonth() === 0) {
num = this.date[11];
} else {
num = this.date[this.now.getMonth() - 1];
}
data.unshift(num - i + 1);
}
for (let i = 1;; i++) { // 添加下月日期
if (data.length % 7 === 0) {
break;
} else {
data.push(i);
}
}
} else {
for (let i = 1; i <= this.getFirstWeek(this.now); i++) { // 添加上月空白日期
data.unshift('');
}
}
for (let i = 1; i <= data.length; i++) { // 转换为二维数组
temp.push(data[i - 1]);
if (i % 7 === 0) {
this.result.push(temp);
temp = [];
}
}
this.result.push(temp);
},
getFirstWeek(time) { // 获取每月1号是星期几
const date = new Date(time.getFullYear(), time.getMonth());
return date.getDay();
},
leapYear(time) { // 判断闰年
const year = new Date(time).getFullYear();
return year % 400 === 0 || (year % 4 === 0 && year % 100 !== 0);
},
preMonth() { // 下个月
if (this.now.getMonth() === 0) {
this.now = new Date(this.now.getFullYear() - 1, 11, this.now.getDate());
} else {
this.now = new Date(this.now.getFullYear(), (this.now.getMonth()) - 1, this.now.getDate());
}
this.init(this.need);
},
nextMonth() { // 上个月
if (this.now.getMonth() === 11) {
this.now = new Date(this.now.getFullYear() + 1, 0, this.now.getDate());
} else {
this.now = new Date(this.now.getFullYear(), this.now.getMonth() + 1, this.now.getDate());
}
this.init(this.need);
}
}
$(function () {
Calendar.init();
const render = () => {
const nowDate = Calendar.now;
$('.full-date').text(
`${nowDate.getFullYear()}/${nowDate.getMonth() + 1}/${nowDate.getDate()}`);
Calendar.result.forEach(item => {
let html = '<ul>';
item.forEach(data => {
html += `<li>${data}</li>`;
});
html += '</ul>';
$('#date').append(html);
});
};
render();
$('.left').click(() => {
$('#date').empty();
Calendar.preMonth();
render();
});
$('.right').click(() => {
$('#date').empty();
Calendar.nextMonth();
render();
});
});
</script>
</body>
</html>
JS写一个简单日历的更多相关文章
- 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
- js写一个简单的日历
思路:先写一个结构和样式,然后写本月的时间,之后计算上下月份的关系 <!DOCTYPE html> <html lang="en"> <head> ...
- [NodeJS]使用Node.js写一个简单的在线聊天室
声明:教程来自<Node即学即用>.源代码案例均出自此书.博文仅为个人学习笔记. 第一步:创建一个聊天server. 首先,我们先来写一个Server: var net = require ...
- 用node.js写一个简单爬虫，并将数据导出为 excel 文件
引子 最近折腾node,最开始像无头苍蝇一样到处找资料,然而多数没什么卵用,都在瞎比比.在一阵瞎搞后,我来分享一下初步学习node的三个过程: 1 撸一遍NODE入门,对其有个基本的了解: 2 撸一遍 ...
- 用JS写一个简单的程序,算出１００中７的倍数的最大值
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 用JS 写一个简单的程序，切换七彩盒子背景
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JS写一个简单的程序，输入两个整数，打印这两个数的和，差，积，余数
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JS写一个简单的程序，判断年份是平年还是闰年
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- js写一个简单的九九乘法表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- TensorFlow - 在 windows 系统上安装
安装方式: 1.pip (将介绍) 2.Anaconda 我采用的是本地 pip 方式 需提前安装 Python - Python 3.5.x > TF 只支持 Python 3.5.x 版本, ...
- 拖放事件（drop events）在Firefox上运行会出现的问题
可能会有人觉得我废话特别多,我就在开头写一个简单粗暴的版本: 在Firefox中ondrop事件会触发Firefox自带的拖拽搜索功能,在ondrop事件触发执行时触发的函数中加上这两条: /* 禁止 ...
- Rocketlab公司火箭Electron介绍
http://https://en.wikipedia.org/wiki/Rocket_Lab https://www.rocketlabusa.com/ Rocketlab(火箭实验室)是一家致力于 ...
- Where 与 Having
WHERE在数据分组前进行过滤,HAVING在数据分组后过滤. HAVING可以对检索(或计算)出的结果过滤,WHERE则不行. WHERE.聚合函数.HAVING在from后面的执行顺序:WHERE ...
- Linux colrm命令详解
Linux colrm命令 colrm用于从文件或标准输入中过滤掉指定的列.从标准输入设备读取书记,转而输出到标准输出设备.如果不加任何参数,则该指令不会过滤任何一行. 语法: colrm 参数 参数 ...
- 蓝桥杯省赛 牌型种数java
小明被劫持到X赌城,被迫与其他3人玩牌. 一副扑克牌(去掉大小王牌,共52张),均匀发给4个人,每个人13张.这时,小明脑子里突然冒出一个问题:如果不考虑花色,只考虑点数,也不考虑自己得到的牌的先后顺 ...
- 各平台操作系统查询主机WWPN
查询主机WWPN 目录 3.4.3.8.2.3 查询主机WWPN 3.4.3.8.2.3.1 查看主机HBA相应端口的WWPN(Windows) 3.4.3.8.2.3.2 查看主机HBA相应端口的W ...
- OO第三次博客
规格化设计的发展历史 在计算机的早期发展中,软件开发没有可以遵循的系统方法,往往只有源代码而没有软件说明书等文档,因此这段时期的软件通用性时很有限的.后来到了20世纪60年代,软件开始被广泛使用,软件 ...
- REST API TO MiniProgram 上线WordPress官方插件库
全新开发的用于 wordpress微信小程序的插件 REST API TO MiniProgram今天上线WordPress官方插件库.这个插件的上一个版本叫:wp-rest-api-for-app, ...
- SpringBoot aop 注解 数据权限校验
注解类: @Retention(RetentionPolicy.RUNTIME) public @interface DataAuthValid { //位置 public int index() d ...