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 ...
随机推荐
- Ubuntu 16.04 强制使用ipv4安装apt-get
参考文献:https://www.linuxidc.com/Linux/2015-09/123340.htm 起因:每次校园网都要自动用ipv6不知道为什么又总之链接不上,导致安装失败,有以下命令强行 ...
- 使用GDB调试将符号表与程序分离后的可执行文件
环境: Centos7.3.GCC4.8.5 适用场景: 由于调试信息比较大,通常将程序分离为可执行程序和符号信息文件,只对外发布可执行程序,需要调试时再将符号信息文件附加. 一.创建可执行程序: u ...
- 一台电脑支持2个git账号：gitlab+github
一.背景 1.公司使用gitlab保存代码,git已支持. 2.需要新增一个人github账户.创建study项目并提交到github上. 3.git提交时互相不混淆 二.操作流程 1.注册githu ...
- docker-solr 使用host模式修改默认的8983端口号
1.使用root账号进入docker-solr docker exec -it 127627ab6247 -u root /bin/bash 2.安装vim apt-get update apt-ge ...
- 安装owncloud出现：Error while trying to create admin user: An exception occurred while executing
安装owncloud出现:Error while trying to create admin user: An exception occurred while executing 1.安装ownc ...
- 关于FIFO memory buffer模块的设计
关于FIFO memory buffer模块的设计 FIFO memory `timescale 1ns / 1ps ///////////////////////////////////////// ...
- vue 深拷贝
Vue.set(row,'isEdit',true); let newRow = JSON.parse(JSON.stringify(row)); this.totalData.push(newRow ...
- System.DllNotFoundException: Unable to load DLL 'libgdiplus': The specified module could not be found.
netcore 使用System.Drawing 出现如下错误: Unhandled Exception: System.TypeInitializationException: The type i ...
- 工控随笔_16_西门子_S7-200.Smart软件安装兼容性说明和错误代码：error code hr=0x80070430
现在西门子的软件是更新换代太快了,前几年还是Step 7 Micro/Win,后来又出了S7-200 Smart PLC,理所当然的编程调试软件也水涨船高,出了新的Step 7 Micro/Win ...
- HTTP Server to Client Communication
1. Client browser short polling The most simple solution, client use Ajax to sends a request to the ...