用jquery写一个万年历
2023-10-12 15:15
jQuery
SQL Server
Oracle
MySQL
PostgreSQL
NoSQL
大数据
其他数据库
Windows
Windows Server
Linux
macOS
嵌入式
APACHE
NGINX
redis
Docker
git
互联网
tomcat
Html/Css
JavaScript
jQuery
HTML5
Angular
React
Vue
小程序
架构设计
面向对象
设计模式
领域驱动设计
Android开发
iOS开发
Flutter
鸿蒙
其他手机开发
敏捷开发
项目与团队管理
软件工程其他
.NET
Java
Python
Go
PHP
C++
Ruby
Swift
C语言
Erlang
Delphi
Scala
R语言
Verilog
Dart
Rust
其他语言
asp
nodejs
读书区
翻译区
求职面试
计算机图形学
软件测试
菜谱
SEO技术
摄影
生活技巧
162
0
0
0
标题录入
封面图
用jquery写一个万年历 实现一个完整的万年历是一个相对复杂的任务,但我可以给你提供一个简化版的示例,包含基本的月份切换和日期显示。在这个示例中,我将使用HTML和jQuery来创建一个简单的静态万年历。 html ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>简化版万年历</title> <style> #calendar { font-family: Arial, sans-serif; max-width: 400px; margin: auto; text-align: center; } table { width: 100%; border-collapse: collapse; margin-top: 10px; } th, td { padding: 10px; border: 1px solid #ddd; } th { background-color: #f2f2f2; } </style> </head> <body> <div id="calendar"></div> <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> <script src="calendar.js"></script> </body> </html> ``` 然后,创建一个名为 calendar.js 的 JavaScript 文件,包含以下代码: javascript ``` $(document).ready(function () { // 获取当前日期 var currentDate = new Date(); // 初始化日历 function initializeCalendar(year, month) { var calendarHtml = '<h2>' + year + '年 ' + (month + 1) + '月</h2>'; calendarHtml += '<table>'; calendarHtml += '<thead><tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr></thead>'; calendarHtml += '<tbody>'; // 获取当月的第一天 var firstDay = new Date(year, month, 1); var startingDay = firstDay.getDay(); // 获取当月的最后一天 var lastDay = new Date(year, month + 1, 0); var totalDays = lastDay.getDate(); // 填充日历表格 var day = 1; for (var i = 0; i < 6; i++) { calendarHtml += '<tr>'; for (var j = 0; j < 7; j++) { if (i === 0 && j < startingDay) { calendarHtml += '<td></td>'; } else if (day > totalDays) { break; } else { calendarHtml += '<td>' + day + '</td>'; day++; } } calendarHtml += '</tr>'; } calendarHtml += '</tbody>'; calendarHtml += '</table>'; $('#calendar').html(calendarHtml); } // 初始化当前月份的日历 initializeCalendar(currentDate.getFullYear(), currentDate.getMonth()); // 处理下一个月按钮的点击事件 $('#calendar').on('click', '#nextMonth', function () { currentDate.setMonth(currentDate.getMonth() + 1); initializeCalendar(currentDate.getFullYear(), currentDate.getMonth()); }); // 处理上一个月按钮的点击事件 $('#calendar').on('click', '#prevMonth', function () { currentDate.setMonth(currentDate.getMonth() - 1); initializeCalendar(currentDate.getFullYear(), currentDate.getMonth()); }); }); ``` 这个简化版的万年历包含了基本的月份切换功能。你可以根据需要扩展这个示例,添加更多功能,如节假日显示、点击日期弹出详细信息等。
上一篇:
jquery实现离过年还剩多少天,要有秒倒计时。
下一篇:
jquery 实时判断textarea输入了多少个字,并通过parent,children显示字符数
标题录入,一次不能超过6条
勇气是什么?个人勇气如何掌握?
T:0.029347s,M:159.95 KB
返回顶部
留言
留言
评论