JavaScript日历仅显示一行问题求助：代码排查需求

你的日历仅显示第一行的核心问题是循环逻辑错误：当前代码仅用一个for循环遍历了一周的7天，生成完第一行后循环直接结束，没有继续生成后续周的日期行。

问题代码的关键缺陷 #

原代码中的循环仅执行7次，处理完第一周后就退出：

for (var day = 0; day < 7; day++) {
  // ...生成单元格逻辑
  if (day === 6 || dayCounter > lastDay) {
    $calendarTable.append($row);
    if (dayCounter > lastDay) {
      break; // 直接跳出循环，后续周无法生成
    }
    $row = $('&lt;tr&gt;');
  }
}

修正后的完整代码 #

JavaScript部分

"use strict";
$(document).ready(function() {
  var getMonthText = function(currentMonth) {
    const months = ["January", "February", "March", "April", "May", "June", 
                    "July", "August", "September", "October", "November", "December"];
    return months[currentMonth];
  };

  // 获取当前年月
  var currentDate = new Date();
  var currentMonth = currentDate.getMonth();
  var currentYear = currentDate.getFullYear();

  // 更新表头
  $('#month_year').text(getMonthText(currentMonth) + ' ' + currentYear);

  var getLastDayofMonth = function(currentMonth) {
    return new Date(currentYear, currentMonth + 1, 0).getDate();
  };

  var firstDay = new Date(currentYear, currentMonth, 1).getDay();
  var lastDay = getLastDayofMonth(currentMonth);
  var $calendarTable = $('#calendar');

  var dayCounter = 1;
  var $row = $('<tr>');

  // 持续循环直到所有日期都被添加
  while (dayCounter <= lastDay) {
    for (var day = 0; day < 7; day++) {
      if (day < firstDay && dayCounter === 1) {
        $row.append('&lt;td&gt;&lt;/td&gt;'); // 第一周的空白前置单元格
      } else if (dayCounter <= lastDay) {
        $row.append('&lt;td&gt;' + dayCounter + '&lt;/td&gt;');
        dayCounter++;
      } else {
        $row.append('&lt;td&gt;&lt;/td&gt;'); // 最后一周的空白后置单元格
      }
    }
    $calendarTable.append($row);
    $row = $('&lt;tr&gt;');
    firstDay = 0; // 第一周之后不再需要前置空白
  }
});

HTML部分（无需修改）

<!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">&nbsp;</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>

关键改进点 #

1. 循环结构调整：用while循环包裹每周的for循环，确保所有日期都被处理完才停止
2. 前置空白逻辑优化：仅在第一周处理firstDay对应的空白单元格，后续周直接从第一天开始填充
3. 月份名称函数简化：用数组替代冗长的if-else判断，代码更简洁高效

内容的提问来源于stack exchange，提问作者Goju Noah