JS实现日历表

有需要的可以用一下,这是一个简单的demo.

HTML:

<table><thead><tr><th colspan="2"><span class="left">«</span></th><th colspan="3"><span class="time"></span></th><th colspan="2"><span class="right">»</span></th></tr><tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr></thead><tbody class="main"></tbody></table>

CSS:

<style>table {width: 320px;background: #ffffff;color: #000000;}td,th {text-align: center;height: 30px;}</style>

JS:

<script>var oTime = document.querySelector(".time") //头部年月标题显示var oMain = document.querySelector(".main") //主体日历数字显示var leftBtn = document.querySelector(".left"); //点击左边的按钮,月份减少var rightBtn = document.querySelector(".right"); //点击右边的按钮,月份增加var time = new Date(); //获取当前系统时间leftBtn.onclick = function() {time.setMonth(time.getMonth() - 1);getPrevDays(time);getCurrentDays(time);minHead(time);mainList(time, getPrevDays(time), getCurrentDays(time));}rightBtn.onclick = function() {time.setMonth(time.getMonth() + 1);getPrevDays(time);getCurrentDays(time);minHead(time);mainList(time, getPrevDays(time), getCurrentDays(time));}function minHead(time) {oTime.innerText = time.getFullYear() + "年" + (time.getMonth() + 1) + "月"}function mainList(time, prevDays, currentDays) {var beforeCount = prevDays.length + currentDays.length;var cellList = document.querySelectorAll("td");for (var i = 0; i < prevDays.length; i++) { //上一个月所占格子cellList[i].innerHTML = "<font color='#D3D5DA'>" + prevDays[i] + "</font>"}for (var i = 0; i < currentDays.length; i++) { //当前月所占格子if (currentDays[i] == time.getDate()) { //当天日期高亮显示cellList[i + prevDays.length].innerHTML = "<font color='blue'>" + currentDays[i] + "</font>";} else { //当月日期白色突出cellList[i + prevDays.length].innerHTML = "<font color='#000000'>" + currentDays[i] + "</font>";}}for (var i = 1; i <= (42 - beforeCount); i++) { //下个月所占格子cellList[i + beforeCount - 1].innerHTML = "<font color='#D3D5DA'>" + i + "</font>"}}function createCells() {for (var i = 0; i < 6; i++) { //6行var oTr = document.createElement("tr");for (var j = 0; j < 7; j++) { //7列var oTd = document.createElement("td");oTr.appendChild(oTd);}oMain.appendChild(oTr);}}function getPrevDays(time) { //获得上一个在本月所占的天数var time = new Date(time); //拷贝一份时间,避免时间修改发生冲突var list = []; //上一个月所占的天数time.setDate(1); //设置成当月1号,便于查看是星期几;var day = time.getDay() == 0 ? 7 : time.getDay(); //如果是0,说明数字第一行需要空出来放上一个月的时间//获取上一个月的天数time.setDate(0); //系统自动计算到上一个月的最后一天var maxDay = time.getDate(); //得到上一个月的最后一天时间for (var i = maxDay; i > (maxDay - day); i--) {//根据maxDay和day之间的关系,把上一个月的时间放到list中list.push(i);}list.reverse(); //日期升序排列return list;}function getCurrentDays(time) { //获取当前月的天数var time = new Date(time); //拷贝时间,原因同上time.setDate(1); //确保不会出现跨越现象  如果当前时间是1月31号就会出现跨越到三月份的事情var list = [];//下面代码是为了获取上一个月的天数time.setMonth(time.getMonth() + 1) //修改时间到下一个月time.setDate(0); //修改时间日期是0var maxDay = time.getDate();//获取到上一个月的日期并放到数组中for (var i = 1; i <= maxDay; i++) {list.push(i);}return list;}createCells(); //创建6行7列表格getPrevDays(time); //获取上一个月在当前月所占的格子数getCurrentDays(time); //获取当前月所占的格子数minHead(time); //显示头部标题mainList(time, getPrevDays(time), getCurrentDays(time)); //显示主题日历</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/221928.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

湖南开放大学形成性考核 平时作业 统一资料 参考

卷代号&#xff1a;1282 社会学概论&#xff08;本&#xff09; 参考试题 一、单项选择题&#xff08;在各题的备选答案中&#xff0c;只有1项是正确的&#xff0c;请将正确答案的序号&#xff0c;填写在题中的括号内。每题1分&#xff0c;共10分&#xff09; 1.从20世纪30年代…

【快速应用开发】看看RedwoodJS

自我介绍 做一个简单介绍&#xff0c;酒架年近48 &#xff0c;有20多年IT工作经历&#xff0c;目前在一家500强做企业架构&#xff0e;因为工作需要&#xff0c;另外也因为兴趣涉猎比较广&#xff0c;为了自己学习建立了三个博客&#xff0c;分别是【全球IT瞭望】&#xff0c;【…

vue3+vite4中使用svg,使用iconfont-svg图标

记录一下vue3中如何使用svg图标&#xff0c;vue2中大家常用iconfont字体图标&#xff0c;现在vue3大家都又推荐svg的方式使用图表&#xff0c;包括elementplus组件库也变成使用svg方式引用图标。 1、创建svg组件 components/IconSvg.vue <template><svg class"…

保障事务隔离级别的关键措施

目录 引言 1. 锁机制的应用 2. 多版本并发控制&#xff08;MVCC&#xff09;的实现 3. 事务日志的记录与恢复 4. 数据库引擎的实现策略 结论 引言 事务隔离级别是数据库管理系统&#xff08;DBMS&#xff09;中的一个关键概念&#xff0c;用于控制并发事务之间的可见性。…

爱名网被评为“最佳安全保障注册服务机构”

12月12日&#xff0c;由中国互联网络信息中心主办&#xff0c;中国科学院计算机网络信息中心、中国工业互联网研究院、中国互联网协会联合主办&#xff0c;人民邮电报社承办的第四届中国互联网基础资源大会&#xff08;CNIRC&#xff09;在北京举办。 在本届大会上&#xff0c…

网络镜像 -- 本地端口镜像

网络镜像 网络镜像技术允许复制和记录在计算机网络上传输的数据流量&#xff0c;可以将交换机中一个端口的流量复制到另一个端口。 网络镜像广泛用于抓包监控。 用一个场景来举例&#xff1a; 如图&#xff0c;PC1、2、3分别是三台主机&#xff0c;与Switch交换机对应端口…

Mac 如何删除文件及文件夹?可以尝试使用终端进行删除

MacOS 是 Mac 电脑采用的操作系统&#xff0c;你知道 Mac 如何删除文件吗&#xff1f;除了直接将文件或者文件夹拖入废纸篓之外&#xff0c;我们还可以采用终端命令的办法去删除文件&#xff0c;本文为大家总结了 Mac 删除文件方法。 为何使用命令行删除文件 在使用 Mac 电脑…

训练效率提升40倍!开源图片生3D模型,Stable Zero123来啦

12月14日&#xff0c;著名生成式AI开源平台Stability.ai在官网开源了&#xff0c;图片生成高质量3D模型——Stable Zero123。 Stable Zero123是基于今年3月&#xff0c;丰田研究院和哥伦比亚大学联合开源的Zero123模型开发而成。主要通过更改渲染数据集和分数蒸馏对模型进行了…

【复杂gRPC之Java调用go】

1 注意点 一般上来说如果java调用java的话&#xff0c;我们可以使用springcloud来做&#xff0c;而面对这种跨语言的情况下&#xff0c;gRPC就展现出了他的优势。 代码放在这了&#xff0c;请结合前面的go服务器端一起使用 https://gitee.com/guo-zonghao/java-client-grpc /…

实战章节:在Linux上部署各类软件

详细资料见文章的资源绑定 一、前言 1.1 为什么学习各类软件在Linux上的部署 在前面&#xff0c;我们学习了许多的Linux命令和高级技巧&#xff0c;这些知识点比较零散&#xff0c;同学们跟随着课程的内容进行练习虽然可以基础掌握这些命令和技巧的使用&#xff0c;但是并没…

算法-只出现一次的数字集合

前言 仅记录学习笔记&#xff0c;如有错误欢迎指正。 题目 记录一道面试过的题目 题目如下&#xff1a; 给定一个数组&#xff0c;内容为1-n的数字&#xff0c;其中每个数字只会出现一次或者多次&#xff0c;请在时间复杂度O(n),空间复杂度O(1)的条件下找出所有出现一次的数…

事务隔离级别:保障数据库并发事务的一致性与性能

目录 引言 1. 事务隔离级别概述 2. 读未提交隔离级别 3. 读已提交隔离级别 4. 可重复读隔离级别 5. 串行化隔离级别 6. 保障事务隔离级别的机制 7. 如何选择合适的隔离级别 8. 结语 引言 在数据库管理系统&#xff08;DBMS&#xff09;中&#xff0c;事务隔离级别是一…

Redisson分布式锁原理分析

1.Redisson实现分布式锁 在分布式系统中&#xff0c;涉及到多个实例对同一资源加锁的情况&#xff0c;传统的synchronized、ReentrantLock等单进程加锁的API就不再适用&#xff0c;此时就需要使用分布式锁来保证多服务之间加锁的安全性。 常见的分布式锁的实现方式有&#xff…

【SpringBoot2】idea 上 gradle build 报 lombok 注释类有 “错误: 找不到符号“

jwensh2023.12.11 问题 idea springboot 2.7 gradle 7.6 的 build.gradle 中引入了 lombok implementation group: org.projectlombok, name: lombok, version: 1.18.2 在 pojo 上使用 Data、AllArgsConstructor、NoArgsConstructor Data AllArgsConstructor NoArgsConstruc…

PyTorch 模型训练性能大揭秘:从基础到高级技巧一网打尽!

PyTorch 是一个开源的 Python 机器学习库&#xff0c;基于Torch&#xff0c;用于自然语言处理等应用程序。 PyTorch既可以看作加入了GPU支持的numpy&#xff0c;也可以看成一个拥有自动求导功能的强大的深度神经网络&#xff0c;同时它也是大模型开发的首选工具。 《PyTorch模…

不用再找,这是大模型 LLM 微调经验最全总结

大家好&#xff0c;今天对大模型微调项目代码进行了重构&#xff0c;支持ChatGLM和ChatGLM2模型微调的切换&#xff0c;增加了代码的可读性&#xff0c;并且支持Freeze方法、Lora方法、P-Tuning方法、「全量参数方法」 微调。 PS&#xff1a;在对Chat类模型进行SFT时&#xff…

提升前端效率:掌握防抖与节流

目录 概念 代码实现 区别 应用场景 概念 当涉及到处理高频事件时&#xff0c;防抖&#xff08;Debounce&#xff09;和节流&#xff08;Throttle&#xff09;成为关键的工具。它们的作用是优化函数的执行频率&#xff0c;特别是在处理浏览器事件&#xff08;如resize、scro…

UDP网络编程其他相关事项

netstat指令 netstat -an 可以查看当前主机网络情况&#xff0c;包括端口监听情况和网络连接情况。 netstat -an | more 可以分页显示。 要求在dos控制台下执行。 说明&#xff1a;&#xff08;1&#xff09;Listening表示某个端口在监听&#xff1b;&#xff08;2&#xf…

binkw32.dll丢失怎么办?这5个方法都可以解决binkw32.dll丢失问题

binkw32.dll文件是什么&#xff1f; binkw32.dll是一个动态链接库文件&#xff0c;它是Windows操作系统中的一个重要组件。它包含了许多用于处理多媒体文件的函数和资源&#xff0c;如视频、音频等。当我们在电脑上打开或播放某些多媒体文件时&#xff0c;系统会调用binkw32.d…

显示器件是什么

显示器件 电子元器件百科 文章目录 显示器件前言一、显示器件是什么二、显示器件的类别三、显示器件的应用实例四、显示器件的作用原理总结前言 显示器件根据不同的技术原理和应用领域,具有不同的特点和优势,可适用于电子产品、电视、计算机显示器、手持设备、汽车仪表盘等…