思路：先写一个结构和样式，然后写本月的时间，之后计算上下月份的关系

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.             list-style: none;
  14.         }
  15.  
  16.         li.disabled {
  17.             background: #eee;
  18.             color: #ccc;
  19.             cursor: not-allowed;
  20.         }
  21.  
  22.         .container {
  23.             border: 1px solid #ccc;
  24.             margin: 50px;
  25.             width: 350px;
  26.         }
  27.  
  28.         .container li {
  29.             width: 50px;
  30.             height: 50px;
  31.             text-align: center;
  32.             line-height: 50px;
  33.             cursor: pointer;
  34.         }
  35.  
  36.         .container li:not(.disabled):hover {
  37.             background: rgb(185, 238, 238);
  38.         }
  39.  
  40.         .container ul {
  41.             display: flex;
  42.             flex-wrap: wrap;
  43.         }
  44.  
  45.         li.active {
  46.             background: darkcyan;
  47.             color: #fff;
  48.         }
  49.         button{
  50.             width: 50px;
  51.  
  52.             background-color: rgb(28, 113, 224);
  53.             color: #fff;
  54.         }
  55.     </style>
  56. </head>
  57.  
  58. <body>
  59.     <button class="prev">上月</button>
  60.     <button class="next">下月</button>
  61.     <div class="container">
  62.         <ul>
  63.             <li>日</li>
  64.             <li>一</li>
  65.             <li>二</li>
  66.             <li>三</li>
  67.             <li>四</li>
  68.             <li>五</li>
  69.             <li>六</li>
  70.         </ul>
  71.         <ul class='content'>
  72.  
  73.         </ul>
  74.     </div>
  75.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  76.     <script>
  77.         $(function () {
  78.  
  79.             let totalDays = 0
  80.             let now = new Date()
  81.             let today = now.getDate()
  82.             let global_month = now.getMonth() + 1
  83.             let global_year = now.getFullYear()
  84.  
  85.             $('.prev').click(function () {
  86.                 now.setMonth(now.getMonth() - 1) //6-31  7-1
  87.                 initCalendar()
  88.             })
  89.  
  90.             $('.next').click(function () {
  91.                 now.setMonth(now.getMonth() + 1) //6-31  7-1
  92.                 initCalendar()
  93.             })
  94.  
  95.             function initCalendar() {
  96.                 $('.content').empty()
  97.                 let month = now.getMonth() + 1
  98.                 let year = now.getFullYear()
  99.  
  100.                 switch (month) {
  101.                     case 1:
  102.                     case 3:
  103.                     case 5:
  104.                     case 7:
  105.                     case 8:
  106.                     case 10:
  107.                     case 12:
  108.                         totalDays = 31
  109.                         break;
  110.                     case 4:
  111.                     case 6:
  112.                     case 9:
  113.                     case 11:
  114.                         totalDays = 30
  115.                         break
  116.                     default:
  117.                         if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
  118.                             totalDays = 29
  119.                         } else {
  120.                             totalDays = 28
  121.                         }
  122.                         break;
  123.                 }
  124.  
  125.                 for (let i = 1; i <= totalDays; i++) {
  126.                     let li = $('<li/>').text(i)
  127.                     if (i === today && year === global_year && month === global_month) li.addClass('active')
  128.                     $('.content').append(li)
  129.                 }
  130.  
  131.                 now.setDate(1)
  132.                 let firstDay = now.getDay()
  133.                 for (let i = 0; i < firstDay; i++) {
  134.                     now.setDate(now.getDate() - 1)
  135.                     let li = $('<li/>').text(now.getDate()).addClass('disabled')
  136.                     $('.content').prepend(li)
  137.                 }
  138.                 now.setDate(now.getDate() + firstDay)
  139.  
  140.                 now.setDate(totalDays)
  141.  
  142.                 let lastDay = 6 - now.getDay()
  143.                 for (let i = 0; i < lastDay; i++) {
  144.                     now.setDate(now.getDate() + 1)
  145.                     let li = $('<li/>').text(now.getDate()).addClass('disabled')
  146.                     $('.content').append(li)
  147.                 }
  148.  
  149.                 now.setDate(now.getDate() - lastDay)
  150.                 now.setDate(1)
  151.             }
  152.  
  153.             initCalendar()
  154.         })
  155.     </script>
  156. </body>
  157.  
  158. </html>

js写一个简单的日历的更多相关文章

  1. 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  2. 使用JAVA写一个简单的日历

    JAVA写一个简单的日历import java.text.DateFormat;import java.text.ParseException;import java.text.SimpleDateF ...

  3. JS写一个简单日历

    JS写一个日历,配合jQuery操作DOM <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

  4. [NodeJS]使用Node.js写一个简单的在线聊天室

    声明:教程来自<Node即学即用>.源代码案例均出自此书.博文仅为个人学习笔记. 第一步:创建一个聊天server. 首先,我们先来写一个Server: var net = require ...

  5. 用node.js写一个简单爬虫，并将数据导出为 excel 文件

    引子 最近折腾node,最开始像无头苍蝇一样到处找资料,然而多数没什么卵用,都在瞎比比.在一阵瞎搞后,我来分享一下初步学习node的三个过程: 1 撸一遍NODE入门,对其有个基本的了解: 2 撸一遍 ...

  6. 用JS写一个简单的程序,算出１００中７的倍数的最大值

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. 用JS 写一个简单的程序，切换七彩盒子背景

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. JS写一个简单的程序，输入两个整数，打印这两个数的和，差，积，余数

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. JS写一个简单的程序，判断年份是平年还是闰年

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. java实现第四届蓝桥杯错误票据

    错误票据 题目描述 某涉密单位下发了某种票据,并要在年终全部收回. 每张票据有唯一的ID号.全年所有票据的ID号是连续的,但ID的开始数码是随机选定的. 因为工作人员疏忽,在录入ID号的时候发生了一处 ...

  2. Linux 系统定时任务

    crond服务管理与访问控制 启动 service crond restart 开机自启动 chkconfig crond on 用户的crontab设置 crontab [选项],其中 -e :编辑 ...

  3. zabbix 监控https URL

    由于生产环境的需要,zabbix 需要监控https的url,但是因为zabbix 是aws ec2 zabbix web绑定了域名,所以没有办法所代理. 有兴趣的可以看官方文档 https://ww ...

  4. 源码分析（5）-ArrayList、Vector和LinkedList（JDK1.8）

    一.概述 1.线程安全:ArrayList和LinkedList非线程安全的.Vector线程安全的. 2.底层数据结构:ArrayList和Vector底层数据结构是数组:LinkedList双向链 ...

  5. 1.Redis Lock

    使用场景 同步锁,让业务方法在锁设定的时间内是同步执行的 redisService.setIfAbsent redisService.expire @PostMapping("/update ...

  6. Edge浏览器现已支持Tampermonkey（油猴）

    Tampermonkey,Greasemonkey,这种扩展可以让我们的浏览器自动运行我们自己定义的脚本,然后就出现了相关网站(比如https://greasyfork.org/zh-CN)让大家在上 ...

  7. IAT表

    0X0 0 DLL介绍 DLL翻译器为动态链接库,原来不存在DLL的概念只有,库的概念,编译器会把从库中获取的二进制代码插入到应用程序中.在现在windows操作系统使用了数量庞大的库函数(进程,内存 ...

  8. CocosCreator实现微信排行榜

    1. 概述 不管是在现实生活还是当今游戏中,各式各样的排名层出不穷.如果我们做好一款游戏,却没有实现排行榜,一定是不完美的.排行榜不仅是玩家了解自己实力的途径,也是游戏运营刺激用户留存的一种途径.在微 ...

  9. Navicat Premium 12安装激活教程_不需要激活工具直接激活

    问题场景:在使用注册机进行破解navicat的时候,在最后一步生成激活码的时候报错:Error on Decrypt Request Code…… 解决方案:1.先关闭Navicat2.Windows ...

  10. 03 . Jenkins构建之代码扫描

    Sonar简介 Sonar 是一个用于代码质量管理的开放平台.通过插件机制,Sonar可以集成不同的测试工具,代码分析工具,以及持续集成工具.与持续集成工具(例如 Hudson/Jenkins 等)不 ...