用jquery写一个万年历
封面图
•
2025-12-22
•
jQuery
279
0
0
0
用 jQuery 实现一个简单的“万年历”(即可以显示当前月份的日历,并支持切换月份),是一个常见的前端练习项目。下面我将提供一个完整的 HTML + jQuery 示例,实现一个基本的万年历功能。 --- ## ✅ 功能说明 - 显示当前月的日历 - 可以点击“上一月”、“下一月”按钮切换月份 - 每天显示为一个格子,包括日期和星期 --- ## 📄 完整代码示例 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>jQuery 万年历</title> <style> body { font-family: Arial, sans-serif; text-align: center; padding: 20px; } #calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 20px; } .day { border: 1px solid #ccc; padding: 10px; background-color: #f9f9f9; } .day-header { font-weight: bold; background-color: #e0e0e0; } #controls { margin-bottom: 10px; } </style> </head> <body> <h2 id="month-year"></h2> <div id="controls"> <button id="prev-month">上一月</button> <button id="next-month">下一月</button> </div> <div id="calendar"></div> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> let currentDate = new Date(); function renderCalendar(date) { const year = date.getFullYear(); const month = date.getMonth(); // 设置标题 $('#month-year').text(`${year} 年 ${month + 1} 月`); // 清空日历 $('#calendar').empty(); // 获取当月第一天是星期几(0=周日,1=周一...) const firstDay = new Date(year, month, 1).getDay(); // 获取当月最后一天 const lastDay = new Date(year, month + 1, 0).getDate(); // 填充星期标题 const daysOfWeek = ['日', '一', '二', '三', '四', '五', '六']; daysOfWeek.forEach(day => { $('#calendar').append(`<div class="day-header">${day}</div>`); }); // 填充空白格子(前面的空格) for (let i = 0; i < firstDay; i++) { $('#calendar').append('<div class="day"></div>'); } // 填充日期 for (let day = 1; day <= lastDay; day++) { $('#calendar').append(`<div class="day">${day}</div>`); } } // 初始化渲染 renderCalendar(currentDate); // 上一月 $('#prev-month').click(() => { currentDate.setMonth(currentDate.getMonth() - 1); renderCalendar(currentDate); }); // 下一月 $('#next-month').click(() => { currentDate.setMonth(currentDate.getMonth() + 1); renderCalendar(currentDate); }); </script> </body> </html> ``` --- ## 🧠 说明 - 使用 `grid` 布局来创建 7 列的表格。 - `firstDay` 表示本月第一天是星期几,用于在日历中填充空白格子。 - `lastDay` 表示本月最后一天的日期。 - 通过 jQuery 的 `.click()` 方法绑定按钮事件,实现月份切换。 --- ## ✅ 扩展建议 你可以进一步扩展这个万年历: - 添加今天高亮 - 支持点击某天弹出提示 - 与后端结合,展示节假日或事件 - 增加年份选择器 如果你需要这些高级功能,我可以继续帮你实现! 是否需要我为你添加更多功能?😊
上一篇:
jquery实现离过年还剩多少天,要有秒倒计时。
下一篇:
jquery 实时判断textarea输入了多少个字,并通过parent,children显示字符数
标题录入,一次不能超过6条
留言
评论