JavaScript自定义日历效果 JavaScript自定义日历效果

本文实例为大家分享了JavaScript自定义日历效果的具体代码，供大家参考，具体内容如下
实现思路：获取每个月的第一天是星期几，然后把前面的天数填充为空，在获取每个月有多少天，循环填充，判断并给给当前时间添加单独样式，点击上一月，和下一月时改变月份。
获取当前月第一天：返回值是 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;

最后点击上一月，下一月月份加一或减一，在执行封装的日历函数。
全部代码：

Document - 锐客网* {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; }上一月2022年下一月五月日一二三四五六
1
1
1
1
1
1
1

【JavaScript自定义日历效果】效果：