JavaScript自定义日历
js日历插件
实现思路:获取每个月的第一天是星期几,然后把前面的天数填充为空,在获取每个月有多少天,循环填充,判断并给给当前时间添加单独样式,点击上一月,和下一月时改变月份。
获取当前月第一天:返回值是 0(周日) 到 6(周六) 之间的一个整数
var date = new Date(); var y=date.getFullYear(); var m=date.getMonth(); new Date(y,m,1).getDay();
获取当前月有多少天
var date = new Date(); var y=date.getFullYear(); var m=date.getMonth(); new Date(y,m+1,-1).getDate()+1;
最后点击上一月,下一月月份加一或减一,在执行封装的日历函数。
全部代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } body { background: #2c3e50; } .calendar { width: 400px; margin: 50px auto; } .calendar-tip { font-size: 16px; text-align: center; color: #fff; } .prev { float: left; cursor: pointer; } .next { float: right; cursor: pointer; } .calendar-month { text-align: center; margin: 10px 0; color: #fff; } ul { list-style: none; display: flex; } li { width: 57px; text-align: center; height: 55px; line-height: 55px; font-size: 16px; color: #fff; } .calendar-day { display: flex; } .calendar-day span { flex: 1; color: #fff; text-align: center; height: 40px; line-height: 40px; } .calendar-data { display: flex; flex-wrap: wrap; } li { width: 57px; cursor: pointer; } li:hover { background: #2d3436; } .calendar-data .on { color: #d63031; } </style> </head> <body> <div class="calendar"> <div class="calendar-tip"> <span class="prev">上一月</span> <em id="year">2022年</em> <span class="next">下一月</span> </div> <div class="calendar-month">五月</div> <div class="calendar-day"> <span>日</span> <span>一</span> <span>二</span> <span>三</span> <span>四</span> <span>五</span> <span>六</span> </div> <ul class="calendar-data"> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> </ul> </div> <script> var date = new Date(); var year = document.querySelector("#year"); var month = document.querySelector(".calendar-month"); var calendarData = document.querySelector(".calendar-data"); var prev = document.querySelector(".prev"); var next = document.querySelector(".next"); var monthArr = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]; var y,m,day,d,html,today; calendar(); function calendar() { y = date.getFullYear(); year.innerHTML = y + "年"; m = date.getMonth(); month.innerHTML = monthArr[m]; day = new Date(y, m, 1).getDay(); //获取每个月第一天是周几 d = new Date(y, m + 1, -1).getDate() + 1; //获取多少天 html = ""; //把每个月第一天之前的时间填充为空 for (var i = 0; i < day; i++) { html += "<li> </li>"; } for (var j = 1; j <= d; j++) { if (y==new Date().getFullYear() && m==new Date().getMonth() && j== date.getDate()) { html += "<li class='on'>" + j + "</li>"; } else { html += "<li>" + j + "</li>"; } } calendarData.innerHTML = html; } prev.onclick = function () { date.setMonth(date.getMonth() - 1); calendar(); } next.onclick = function () { date.setMonth(date.getMonth() + 1); calendar(); } </script> </body> </html>
效果:
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)