日历

改bug的时候偶然看到了一段展示日历的js,平时不怎么写这个,记一下...

Date对象
构造函数

new Date();
new Date(value);
new Date(dateString);
new Date(year, month[, day[,hour[,minutes[,seconds[,milliseconds]]]]]);

month从0开始
day从1开始

Date.prototype方法
+ getDate
返回指定日期对象的月份中的第几天(1-31)
+ getFullYear
年份
+ getMonth
月份(0-11)
+ getDay
星期中的第几天(0-6)
+ getHours
小时(0-23)

const myDate = new Date();
// 获取年份
const mYear = myDate.getFullYear();
// 获取月份,从0开始
const mMonth = myDate.getMonth();

// 下面一个月的第0天,但是day从1开始,也就是下个月第一天的前一天
// 即当前月的最后一天
const lastDay = new Date(mYear, mMonth + 1, 0);
// 当前月最后一天是第几天(从1开始)
// 即当前月的天数
const totalDay = lastDay.getDate();
// 本月第一天是第一周的第几天(从0开始)
const firstDay = new Date(mYear, mMonth, 1).getDay();

然后创建一个列表,一行7个共42个,因为一月日历上最多排6行(css控制浮动)
由于firstDay是从0开始的,第一天可以排为周日,然后一直循环totalDay个就可以了(css控制样式,可以设置为背景图直接改class来显示数字)

Comments
Write a Comment