我不确定我是否遗漏了需要添加到 HTML 中的内容或其他内容，但我需要在课堂上完成此操作。我以一种对我来说有意义的方式编写了 JavaScript，但我只得到了本月的第一行。天数也正确计算。一切似乎都很好，但我显然错过了一些东西，因为我没有得到我想要的结果。
"use strict";
$(document).ready(function() {
var getMonthText = function(currentMonth) {
if (currentMonth === 0) {
return "January";
} else if (currentMonth === 1) {
return "February";
} else if (currentMonth === 2) {
return "March";
} else if (currentMonth === 3) {
return "April";
} else if (currentMonth === 4) {
return "May";
} else if (currentMonth === 5) {
return "June";
} else if (currentMonth === 6) {
return "July";
} else if (currentMonth === 7) {
return "August";
} else if (currentMonth === 8) {
return "September";
} else if (currentMonth === 9) {
return "October";
} else if (currentMonth === 10) {
return "November";
} else if (currentMonth === 11) {
return "December";
}
};
// get current month and year
var currentDate = new Date();
var currentMonth = currentDate.getMonth();
var currentYear = currentDate.getFullYear();
// get name of current month
var monthName = getMonthText(currentMonth);
// calander display
var displayName = monthName + ' ' + currentYear;
// update header
$('#month_year').text(displayName);
var getLastDayofMonth = function(currentMonth) {
// set last day variable and gets next month
// sets the day of the next month to 0
// since there is no day 0 it get the last day of the previous month
var lastDay = new Date(new Date().getFullYear(), currentMonth + 1, 0).getDate();
return lastDay;
};
// get first day of month
var firstDay = new Date(currentYear, currentMonth, 1).getDay();
// get last day of month
var lastDay = getLastDayofMonth(currentMonth);
// reference to table
var $calendarTable = $('#calendar');
// create rows and cells for calendar
var dayCounter = 1;
var $row = $('<tr>');
for (var day = 0; day < 7; day++) {
if (day < firstDay) {
$row.append('<td></td>'); // Add blank cells before the first day
} else if (dayCounter <= lastDay) {
$row.append('<td>' + dayCounter + '</td>');
dayCounter++;
} else {
$row.append('<td></td>'); // Add blank cells after the last day
}
if (day === 6 || dayCounter > lastDay) {
$calendarTable.append($row); // Append the completed row
if (dayCounter > lastDay) {
break; // Exit the loop when all days are added
}
$row = $('<tr>'); // Create a new row for the next week
}
}
});<!DOCTYPE html>
<html>
<head>
<title>Calendar</title>
<link rel="stylesheet" href="calendar.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="calendar.js"></script>
</head>
<body>
<main>
<h1><span id="month_year"> </span></h1>
<table id="calendar">
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
</table>
</main>
</body>
</html>这里是重写。请研究它并在需要时提出问题
您的主要问题是您只运行了代码 7 天而不是整个月
"use strict";
const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
const getLastDayofMonth = currentMonth => new Date(new Date().getFullYear(), currentMonth + 1, 0).getDate();
$(document).ready(function() {
var currentDate = new Date();
var currentMonth = currentDate.getMonth();
var currentYear = currentDate.getFullYear();
var monthName = months[currentMonth];
var displayName = monthName + ' ' + currentYear;
$('#month_year').text(displayName);
var weekDayOfTheFirst = new Date(currentYear, currentMonth, 1).getDay();
var lastDay = getLastDayofMonth(currentMonth);
var $calendarTable = $('#calendar');
let $row = $('<tr>');
// Add leading cells
for (let i = 0; i < weekDayOfTheFirst; i++) {
$row.append('<td></td>');
}
// Add calendar days
for (let day = 1; day <= lastDay; day++) {
$row.append(`<td>${day}</td>`);
weekDayOfTheFirst++;
// If it's a Sunday or the last day of the month, append the row
if (weekDayOfTheFirst % 7 === 0 || day === lastDay) {
$calendarTable.append($row);
$row = $('<tr>');
}
}
});td {
text-align: center
}<!DOCTYPE html>
<html>
<head>
<title>Calendar</title>
<link rel="stylesheet" href="calendar.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="calendar.js"></script>
</head>
<body>
<main>
<h1><span id="month_year"> </span></h1>
<table id="calendar">
<thead>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</main>
</body>
</html>