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> ...
随机推荐
- Java实现 LeetCode 345 反转字符串中的元音字母
345. 反转字符串中的元音字母 编写一个函数,以字符串作为输入,反转该字符串中的元音字母. 示例 1: 输入: "hello" 输出: "holle" 示例 ...
- Java实现 蓝桥杯VIP 算法提高 Torry的困惑(提高型)
算法提高 Torry的困惑(提高型) 时间限制:1.0s 内存限制:512.0MB 问题描述 Torry从小喜爱数学.一天,老师告诉他,像2.3.5.7--这样的数叫做质数.Torry突然想到一个问题 ...
- Java实现 蓝桥杯VIP 算法提高 三角形面积
算法提高 三角形面积 时间限制:1.0s 内存限制:256.0MB 问题描述 由三角形的三边长,求其面积. 提示:由三角形的三边a,b,c求面积可以用如下的公式: s=(a+b+c)/2 输入格式 由 ...
- Netty源码学习系列之4-ServerBootstrap的bind方法
前言 今天研究ServerBootstrap的bind方法,该方法可以说是netty的重中之重.核心中的核心.前两节的NioEventLoopGroup和ServerBootstrap的初始化就是为b ...
- Spring-AOP之工作实践（二）
案例二.前端页面权限控制 对controllor控制器中的某写方法进行增强,如实现页面的按钮权限控制. /** * 保存session的容器 */ public class SessionContex ...
- Flask flush 闪现
闪现 要用必须导入 flash , get_flashed_messages flash 用于存闪现的值.他有两个参数,1 messsage,用来存储信息 2 category ,用于给信息分类,该参 ...
- thinkphp5集成GatewayWorker
Workerman是一款纯PHP开发的开源高性能的PHP socket 服务器框架,而GatewayWorker则是基于Workerman开发的一个长连接框架,支持分布式部署,支持全局广播或者向任意客 ...
- Nice Jquery Validator 快速上手
(1).直接引用 一行代码引入插件,local 参数用来加载对应的配置文件.如果不传 local 参数,配置以及样式就需要自行引入. <script src="path/to/nice ...
- [TopCoder]Seatfriends
题目 点这里看题目. 分析 可以想到用 DP 解决. 由于把空位放到状态里面太麻烦了,因此我们单独将 " 组 " 提出来进行 DP . \(f(i,j)\):前\( ...
- spring源码分析——BeanPostProcessor接口
BeanPostProcessor是处理bean的后置接口,beanDefinitionMaps中的BeanDefinition实例化完成后,完成populateBean,属性设置,完成 初始化后,这 ...