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 ...
随机推荐
- BigData_Jia
#include <stdio.h> #include <string.h> #define MaxSize 10000 int n1, n2, i, k, times; ch ...
- securecrt-active
Mac下面的SecureCRT(附破解方案) 更新到最新的7.3.7 转自 http://bbs.weiphone.com/read-htm-tid-6939481.html 继续更新到7.3.2的破 ...
- js 创建标签执行
<script type="text/javascript"> var _maq = _maq || []; _maq.push('_setAccount', 'F20 ...
- JavaWeb数据库长时间不访问断开链接解决思路
这几天开发的线上商超系统长时间不操作,会频繁的出现第一次登陆或者跟数据库操作有关的方法都会报500错误,很是鸡肋啊这个问题. 经过网上不断的探索,在知识的海洋里畅游了几分钟后我自己总结出一套方法,我用 ...
- mybatis的逆向工程和中文注解
由于MyBatis Generator自带了生成注释的功能,但是,是英文的而且生成的根本无法理解,所以可以通过,修改他的源码来实现生成中文的注释,具体方式有以下几种: 1) 自定义CommentGen ...
- Web高级 Eventloop和事件执行顺序
1. EventLoop 1.1 调用栈 当一个方法执行时内部调用另外的方法,则会形成调用栈,如图: 1.2 任务队列 JavaScript有一个主线程执行当前任务,主线程的代码同步执行,并把遇到的事 ...
- C# 6.0：Null – Conditional 操作符
在引入nameof操作符的同时,C# 6.0 还引入了Null-Conditional操作符.它使开发者可以检查object引用链中的null值.这个null-conditional 操作符写作&qu ...
- [转][ActiveMQ]Apache.NMS.ActiveMQ 用法
下载 C# 组件:http://archive.apache.org/dist/activemq/apache-nms/1.7.0/ 使用说明:https://www.cnblogs.com/cjm1 ...
- Zookeeper并不保证读取的是最新数据
Zookeeper并不保证读取的是最新数据 原文地址:http://www.crazyant.net/2120.html 如果是对zk进行读取操作,读取到的数据可能是过期的旧数据,不是最新的数据. 已 ...
- spring4学习笔记
IOC public class IServiceImpl implements IService { public void IserviceImpl(){} @Override public vo ...