使用javascript写一个实时更新的日历的模块，表头为当前年月，需要标清星期，当前日期底色为圆底蓝色，默认表格全部显示不在本月的显示为灰色

以下是一个使用 JavaScript 实现实时更新的日历模块的示例：

HTML 代码：

<div id="calendar"></div>

JavaScript 代码：

function createCalendar(year, month) {
  // 获取指定年月的第一天
  var firstDay = new Date(year, month - 1, 1);

  // 获取指定年月的最后一天
  var lastDay = new Date(year, month, 0);

  // 获取本月天数
  var daysInMonth = lastDay.getDate();

  // 获取本月第一天是星期几
  var firstDayOfWeek = firstDay.getDay();

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

  // 创建表头
  var thead = document.createElement("thead");
  var tr = document.createElement("tr");
  var th = document.createElement("th");
  th.colSpan = 7;
  th.textContent = year + "年" + month + "月";
  tr.appendChild(th);
  thead.appendChild(tr);
  table.appendChild(thead);

  // 创建表格内容
  var tbody = document.createElement("tbody");
  tr = document.createElement("tr");
  var days = 0;
  for (var i = 0; i < 7; i++) {
    th = document.createElement("th");
    th.textContent = "日一二三四五六"[i];
    tr.appendChild(th);
  }
  tbody.appendChild(tr);
  for (i = 0; i < 6; i++) {
    tr = document.createElement("tr");
    for (var j = 0; j < 7; j++) {
      var td = document.createElement("td");
      if (i == 0 && j < firstDayOfWeek) {
        // 不在本月的日期显示为灰色
        td.classList.add("gray");
      } else if (days < daysInMonth) {
        // 当前日期底色为圆底蓝色
        days++;
        td.textContent = days;
        if (year == new Date().getFullYear() && month == new Date().getMonth() + 1 && days == new Date().getDate()) {
          td.classList.add("today");
        }
      } else {
        // 不在本月的日期显示为灰色
        td.classList.add("gray");
      }
      tr.appendChild(td);
    }
    tbody.appendChild(tr);
  }
  table.appendChild(tbody);

  // 返回表格
  return table;
}

// 更新日历
function updateCalendar() {
  var calendar = document.getElementById("calendar");
  var now = new Date();
  var year = now.getFullYear();
  var month = now.getMonth() + 1;
  calendar.innerHTML = "";
  calendar.appendChild(createCalendar(year, month));
}

// 初始化日历
updateCalendar();

// 定时器，每秒钟更新一次日历
setInterval(updateCalendar, 1000);

CSS 代码：

table {
  border-collapse: collapse;
}

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

.gray {
  color: #ccc;
}

.today {
  background-color: #00f;
  color: #fff;
  border-radius: 50%;
}

运行代码后，页面上会显示一个实时更新的日历模块，表头为当前年月，标清星期，当前日期底色为圆底蓝色，默认表格全部显示不在本月的显示为灰色。