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 ...
随机推荐
- CPU：chip、core 和 processor 的关系
# 查看物理CPU个数 (chip) 物理cpu数:主板上实际插入的cpu数量,可以数不重复的 physical id 有几个(physical id)cat /proc/cpuinfo| gr ...
- zeebe 集成elasticsearch exporter
zeebe 目前还在一直的开发中,同时一些变动还是挺大的,比如simple monitor 的以前是不需要配置HazelcastExporter的 估计是为了进行集群功能处理,新添加的,以前写的配置基 ...
- php session的一些操作
<?php /** * Session控制类 */ class Session{ /** * 设置session * @param String $name session name * @pa ...
- zabbix升级遇到连接不上数据库的问题
问题 迁移zabbix-server端时,原来是4.0版本,现在为4.2版本,遇到如下问题 解决办法 update dbversion set mandatory=;
- swoole之代码热更新实现 转自https://blog.csdn.net/nep_tune/article/details/81329918
随着swoole的版本迭代更新,已经足够稳定了,在阿里,腾讯,yy等各大公司都有着使用,也有很多游戏圈里的朋友也在使用,这些朋友经常会提到一个问题,每次代码更新还需要停止服务,然后重新启动,来达到更新 ...
- react的学习笔记
React中几个核心的概念### 虚拟DOM(Virtual Document Object Model) + **DOM的本质是什么**:浏览器中的概念,用JS对象来表示 页面上的元素,并提供了操作 ...
- 初次使用BAT，请检查Chrome浏览器和ChromeDriver兼容性
ChromeDriver可以理解为Chrome驱动,它是架在BAT程序和Chrome之间的桥梁.但是ChromeDriver的问题是,每个版本的兼容范围很窄,通常只能兼容3个Chrome版本. 因此, ...
- windows短路径转换成长路径
参考: https://blog.csdn.net/wxqian25/article/details/43951281 https://docs.microsoft.com/en-us/windows ...
- ipset 教程
ipset介绍 ipset是iptables的扩展,它允许你创建 匹配整个地址集合的规则.而不像普通的iptables链只能单IP匹配, ip集合存储在带索引的数据结构中,这种结构即时集合比较大也可以 ...
- Android学习笔记一之第一个Android程序
/** *Title:总结昨天下午至今天上午的学习成果 *Author:zsg *Date:2017-8-13 / 一.了解Android 1.Android架构 Android大致可分为四层架构:L ...