https://www.cnblogs.com/zimengxiyu/p/12568477.html
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;
最后点击上一月，下一月月份加一或减一，在执行封装的日历函数。
全部代码：
复制代码
<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 {
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 {
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 {
57px;
cursor: pointer;
}
li:hover {
background: #2d3436;
}
.calendar-data .on {
color: #d63031;
}
</style>
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>
