js写一个简单的日历
思路：先写一个结构和样式，然后写本月的时间，之后计算上下月份的关系
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
} li.disabled {
background: #eee;
color: #ccc;
cursor: not-allowed;
} .container {
border: 1px solid #ccc;
margin: 50px;
width: 350px;
} .container li {
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
cursor: pointer;
} .container li:not(.disabled):hover {
background: rgb(185, 238, 238);
} .container ul {
display: flex;
flex-wrap: wrap;
} li.active {
background: darkcyan;
color: #fff;
}
button{
width: 50px; background-color: rgb(28, 113, 224);
color: #fff;
}
</style>
</head> <body>
<button class="prev">上月</button>
<button class="next">下月</button>
<div class="container">
<ul>
<li>日</li>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
</ul>
<ul class='content'> </ul>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
$(function () { let totalDays = 0
let now = new Date()
let today = now.getDate()
let global_month = now.getMonth() + 1
let global_year = now.getFullYear() $('.prev').click(function () {
now.setMonth(now.getMonth() - 1) //6-31 7-1
initCalendar()
}) $('.next').click(function () {
now.setMonth(now.getMonth() + 1) //6-31 7-1
initCalendar()
}) function initCalendar() {
$('.content').empty()
let month = now.getMonth() + 1
let year = now.getFullYear() switch (month) {
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
totalDays = 31
break;
case 4:
case 6:
case 9:
case 11:
totalDays = 30
break
default:
if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
totalDays = 29
} else {
totalDays = 28
}
break;
} for (let i = 1; i <= totalDays; i++) {
let li = $('<li/>').text(i)
if (i === today && year === global_year && month === global_month) li.addClass('active')
$('.content').append(li)
} now.setDate(1)
let firstDay = now.getDay()
for (let i = 0; i < firstDay; i++) {
now.setDate(now.getDate() - 1)
let li = $('<li/>').text(now.getDate()).addClass('disabled')
$('.content').prepend(li)
}
now.setDate(now.getDate() + firstDay) now.setDate(totalDays) let lastDay = 6 - now.getDay()
for (let i = 0; i < lastDay; i++) {
now.setDate(now.getDate() + 1)
let li = $('<li/>').text(now.getDate()).addClass('disabled')
$('.content').append(li)
} now.setDate(now.getDate() - lastDay)
now.setDate(1)
} initCalendar()
})
</script>
</body> </html>
js写一个简单的日历的更多相关文章
- 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
- 使用JAVA写一个简单的日历
JAVA写一个简单的日历import java.text.DateFormat;import java.text.ParseException;import java.text.SimpleDateF ...
- JS写一个简单日历
JS写一个日历,配合jQuery操作DOM <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...
- [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> ...
随机推荐
- 使用Pycharm安装插件时发生错误
报错内容:pip._vendor.urllib3.exceptions.ReadTimeoutError: HTTPSConnectionPool(host='files.pythonhosted.o ...
- 二叉树的层次序列化和反序列化-----stringstream
string serialize(TreeNode* root) {//层序便利,将空的子节点也放入到字符串 ostringstream out; queue<TreeNode*> q; ...
- oracle使用+简写左关联出现的结果集不一致问题
这是使用(+)的sql语句(已简写) select a.id,b.num from a,b where a.id=b.id(+) and b.num>10 这是使用left join的sql语句 ...
- Python内置Turtle绘图库方法简介+多案例
urtle库是Python语言中一个很流行的绘制图像的函数库,想象一个小乌龟,在一个横轴为x.纵轴为y的坐标系原点,(0,0)位置开始,它根据一组函数指令的控制,在这个平面坐标系中移动,从而在它爬行的 ...
- ELK的踩坑之旅
前言 设计思路如下 有3台机器 2台做elasticsearch的主副节点 1台做kibana和elasticsearch_head 由于机器匮乏我还在这台机器上部署了logstash和nginx服务 ...
- lei muban
#include<iostream> using namespace std; template <typename T> class Operator{ public: T ...
- Servlet 执行时一般实现哪几个方法？
public void init(ServletConfig config): public ServletConfig getServletConfig(): public String getSe ...
- MATLAB作图之二
"平滑"二维图像可以通过对图像进行插值实现.那么对于一条有大量"毛刺"的曲线,是不是也可以通过插值来平滑呢?答案是肯定的. "平滑"前 x ...
- GoldenDict和AutoHotKey的安装和使用
GoldenDict 下载地址:http://sourceforge.net/projects/goldendict/files/early%20access%20builds/ 官网提供的版本很老, ...
- Backup Database pubs to Disk='D:\DataSQL\pubs.bak' --->动态备份所有数据库
备份数据库 在项目实施时,备份恢复数据库还是有必要的,自动或傻瓜式的操作比较方便,未测试,失业了,现在静不下心来,有机会要求再做这类操作时实现它,此处先收藏备用 /* <Dynamic SQL ...