JavaScript在DOM中创建日历表

// 获取要插入日历表的DOM节点
var calendarContainer = document.getElementById("calendar");

// 创建表格元素
var table = document.createElement("table");

// 创建表头
var thead = document.createElement("thead");
var headerRow = document.createElement("tr");
var headers = ["日", "一", "二", "三", "四", "五", "六"];
for (var i = 0; i < headers.length; i++) {
  var th = document.createElement("th");
  th.textContent = headers[i];
  headerRow.appendChild(th);
}
thead.appendChild(headerRow);
table.appendChild(thead);

// 创建日期单元格
var tbody = document.createElement("tbody");
var currentDate = new Date();
var currentMonth = currentDate.getMonth();
var currentYear = currentDate.getFullYear();
var daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
var firstDay = new Date(currentYear, currentMonth, 1).getDay();
var date = 1;
for (var i = 0; i < 6; i++) {
  var row = document.createElement("tr");
  for (var j = 0; j < 7; j++) {
    var cell = document.createElement("td");
    if (i === 0 && j < firstDay) {
      // 空白单元格
      cell.textContent = "";
    } else if (date > daysInMonth) {
      // 超出本月日期范围的单元格
      cell.textContent = "";
    } else {
      // 日期单元格
      cell.textContent = date;
      date++;
    }
    row.appendChild(cell);
  }
  tbody.appendChild(row);
}
table.appendChild(tbody);

// 将表格插入到DOM节点中
calendarContainer.appendChild(table);