我正在尝试使用javascript制作一个日历页面。我想一步一步地解决问题。如果我能解决这个问题，我会解决其他部分。
注意：您可以在代码段中看到问题
注2：由于某些月份的头几天是在周中开始的，因此我会将日历中前几天设为空白。
这就是问题所在：虽然所有月份的日子都在它们应该在的地方，但八月仍然是空的当我在另一个控制台上尝试time.setMonth(8)和time.setDate(0)操作时，它在8月的最后一天得到输出，而它在程序周期中直接进入9月，写入9月两次
我在那个月应用time.setDate(0)事务来了解这个月持续了多少天。
JS代码
const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
const calender = document.querySelector(".calender");
var calenderInner = "";
monthNames.forEach(name => {
calenderInner += `<div class="month" data-month="${name.substring(0,3)}"><h1>${name}</h1></div>`;
calender.innerHTML = calenderInner;
});
const monthDivs = document.querySelectorAll(".month");
monthDivs.forEach(month => {
var daysHTML = "<div class='days'>";
days.forEach(day =>{
daysHTML+= `<div class="day" data-month="${month.dataset.month}" data-day="${day}"><p>${day}</p></div>`;
});
month.innerHTML += daysHTML + "</div>";
});
var time = new Date();
monthDivs.forEach((month, index) => {
time.setMonth(index + 1);
time.setDate(0);
var endDayOfMonth = time.getDate();
for(let i = 1; i <= endDayOfMonth; i++)
{
time.setDate(i);
const currentDay = document.querySelector(`[data-month=${time.toDateString().split(" ")[1]}][data-day=${time.toDateString().split(" ")[0]}]`);
let dayCircle = document.createElement("div");
dayCircle.innerHTML = i;
dayCircle.className = "dayCircles";
currentDay.appendChild(dayCircle);
}
});.main{
background:#bbbbbb;
width:1000px;
height:1560px;
margin:50px auto}
.head{
width:100%;
height:20%;
text-align:center;
}
.head > p{font-size:25px}
.moods{
background:blue;
width:300px;
height:50px;
margin: 10px auto;
}
.calender{
padding:10px;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
}
.month{
background:white;
width:300px;
height:300px;
margin-bottom:10px;
text-align:center;
box-shadow: 10px 5px 2px 1px rgba(0, 0, 0, 0.6)
}
.days{
display: flex;
justify-content: space-evenly;
}
.day{
background:white;
height:50px;
}
.day > p{
border-bottom:2px solid rgba(0, 0, 0, 0.5);
}
.dayCircles{
width:20px;
height:20px;
background:red;
margin: 1px auto;
border-radius: 50%;
}
.emptyDayCircles{
width:20px;
height:20px;
bacground:gray;
margin: 1px auto;
border-radius:50%
}<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='style.css'>
</head>
<body><div>
<div class="main">
<div class="head">
<h1>2020 Mood Calendar</h1>
<div class="moods">
<div class="mood1"></div>
<div class="mood2"></div>
<div class="mood3"></div>
<div class="mood4"></div>
<div class="mood5"></div>
</div>
</div>
<div class="calender">
</div>
</div>
<script src='script.js'></script>
</body>
</html>好的，我解决了！我通过在循环中每次创建一个新的日期对象来防止由于GMT+3而产生的偏差。
.
.
.
monthDivs.forEach((month, index) => {
var time = new Date();
time.setMonth(index + 1);
time.setDate(0);
var endDayOfMonth = time.getDate();
time = new Date();
time.setMonth(index);
const currentDay = document.querySelector(`div[data-month-inner=${time.toDateString().split(" ")[1]}]`);
let firstDayOfMonth = time.getDay();
for(let i = 0; i < firstDayOfMonth; i++)
{
const dayCircle = document.createElement("div");
dayCircle.className = "dayCircles";
currentDay.appendChild(dayCircle);
}
console.log(currentDay);
for(let i = 1; i <= endDayOfMonth; i++)
{
console.log()
const dayCircle = document.createElement("div");
dayCircle.className = "dayCircles";
time.setDate(i);
time.setMonth(index + 1);
dayCircle.innerHTML = `<div class="dayCirclesInner">${i}</div>`
currentDay.appendChild(dayCircle);
if(index == 11 && i == endDayOfMonth)
{
const dayCircle = document.createElement("div");
dayCircle.className = "dayCircles";
dayCircle.innerHTML = `<div class="dayCirclesInner" style="background-color:green">1</div>`;
currentDay.appendChild(dayCircle);
}
}
});