如何在html页面中使用Javascript获得一个简单的日历窗口

<script>
  // 获取日历容器
  var calendarContainer = document.getElementById("calendar-container");

  // 创建日期对象
  var date = new Date();

  // 获取当前年份和月份
  var year = date.getFullYear();
  var month = date.getMonth() + 1;

  // 获取当月的天数
  var daysInMonth = new Date(year, month, 0).getDate();

  // 创建日历表格
  var calendarTable = document.createElement("table");

  // 创建表头
  var tableHead = document.createElement("thead");
  var tableHeadRow = document.createElement("tr");
  var weekdays = ["日", "一", "二", "三", "四", "五", "六"];
  for (var i = 0; i < 7; i++) {
    var tableHeadCell = document.createElement("th");
    tableHeadCell.textContent = weekdays[i];
    tableHeadRow.appendChild(tableHeadCell);
  }
  tableHead.appendChild(tableHeadRow);
  calendarTable.appendChild(tableHead);

  // 创建表格内容
  var tableBody = document.createElement("tbody");
  var currentDay = 1;
  for (var i = 0; i < 6; i++) {
    var tableRow = document.createElement("tr");
    for (var j = 0; j < 7; j++) {
      if (i === 0 && j < new Date(year, month - 1, 1).getDay()) {
        // 填充上个月的日期
        var tableCell = document.createElement("td");
        tableCell.textContent = "";
        tableRow.appendChild(tableCell);
      } else if (currentDay > daysInMonth) {
        // 填充下个月的日期
        break;
      } else {
        // 填充当月的日期
        var tableCell = document.createElement("td");
        tableCell.textContent = currentDay;
        tableRow.appendChild(tableCell);
        currentDay++;
      }
    }
    tableBody.appendChild(tableRow);
  }
  calendarTable.appendChild(tableBody);

  // 将日历表格添加到容器中
  calendarContainer.appendChild(calendarTable);
</script>

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }

  th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
  }

  th {
    background-color: #f2f2f2;
  }

  td {
    cursor: pointer;
  }

  td:hover {
    background-color: #ddd;
  }
</style>