JavaScript编写的网站日历卡在2022年6月15日无法正常运行如何修复

你的日历功能异常是4处代码书写错误共同导致的：

• 硬编码锁死日期：renderCalendar函数开头的date.setDate(15)会在每次渲染时强制把日期重置为当月15号，切换月份时也会被这行代码拉回固定日期，这是日历卡在固定日期的直接原因。
• 变量名书写错误：生成上月日期的循环中，你误将目标变量days写成了全局的date，执行date += 字符串时会把原本的Date类型对象强制转为字符串，后续所有调用date.getMonth()、date.getFullYear()等Date方法的逻辑都会直接抛出类型错误，导致渲染中断，这就是你删掉硬编码15号逻辑后日历内容全部消失的核心原因。
• HTML属性引号缺失：生成下月日期的模板字符串中，class="next-date缺少闭合的双引号，会导致DOM结构解析异常。
• 首日星期计算逻辑错误：你原本用设置为15号的日期获取星期值，这和当月1号的星期值不一定一致，会导致上月占位日期数量计算错误，日历排版错位。

直接替换原JS代码为以下修正后的版本即可：

/*calendar*/
const date = new Date();

const renderCalendar = () => {
  const monthDays = document.querySelector(".days");
  // 单独计算当月1号的星期索引，不修改全局date对象
  const firstDayOfMonth = new Date(date.getFullYear(), date.getMonth(), 1);
  const lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
  const prevlastDay = new Date(date.getFullYear(), date.getMonth(), 0).getDate();
  const firstDayIndex = firstDayOfMonth.getDay();
  const lastDayIndex = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDay();

  const nextDays = 7 - lastDayIndex - 1;
  const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July','August', 'September', 'October', 'November', 'December'];
  const today = new Date();

  document.querySelector(".date h1").innerHTML = months[date.getMonth()];
  document.querySelector(".date p").innerHTML = date.toDateString();

  let days = "";

  // 修正变量名错误，拼接目标为days而非date对象
  for (let x = firstDayIndex; x > 0; x--) {
    days += `<div class="prev-date">${prevlastDay - x + 1}</div>`;
  }

  for (let i = 1; i <= lastDay; i++) {
    // 补全年份判断，避免不同年同月同日误高亮
    if (i === today.getDate() && date.getMonth() === today.getMonth() && date.getFullYear() === today.getFullYear()) {
      days += `<div class="today">${i}</div>`;
    } else {
      days += `<div>${i}</div>`;
    }
  }

  for (let j = 1; j <= nextDays; j++) {
    // 补全class属性的闭合引号
    days += `<div class="next-date">${j}</div>`;
  }
  monthDays.innerHTML = days;
}

document.querySelector(".prev").addEventListener("click", () => {
  date.setMonth(date.getMonth() - 1);
  renderCalendar()
});

document.querySelector(".next").addEventListener("click", () => {
  date.setMonth(date.getMonth() + 1);
  renderCalendar()
});

renderCalendar()

修正后：

• 打开页面默认显示当前系统日期所在月份，不会固定卡在2022年6月
• 点击左右切换按钮可以正常切换上下月
• 不会出现日历内容整体消失的问题
• 当月首日的日期排版对齐正确，不会出现错位
• 仅当前系统真实日期会被添加today类名高亮

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