如何制作公历星期几计算器 现有JS实现代码无输出问题排查

核心问题清单 #

• 表单默认提交行为会刷新页面，计算完的结果还没渲染就被重置了
• DOM更新逻辑写在函数外部，仅页面加载时执行1次，函数计算完成后没有触发页面内容更新
• 仅处理了英文月份名到算法要求的偏移值转换，输入数字月份时没有做偏移对应，会导致计算逻辑完全错误
• 日期、月份等输入值未统一转为数字类型，运算时可能出现字符串拼接异常

修正后代码 #

JS部分 #

function calculateDay(e) {
  // 阻止表单默认提交刷新页面
  e?.preventDefault();
  let innerHTMLText = "";
  // 统一转数字类型
  const day = parseInt(document.getElementById("dayInput").value);
  let month = document.getElementById("monthInput").value;
  const year = document.getElementById("yearInput").value;

  let lastYearDigits = parseInt(year.substr(2, 2));
  const centuryCode = parseInt(year.substr(0, 2));
  let isJanOrFeb = false;

  switch (month.toLowerCase()) {
    case "january":
    case "1":
      month = 11;
      isJanOrFeb = true;
      break;
    case "february":
    case "2":
      month = 12;
      isJanOrFeb = true;
      break;
    case "march":
    case "3":
      month = 1;
      break;
    case "april":
    case "4":
      month = 2;
      break;
    case "may":
    case "5":
      month = 3;
      break;
    case "june":
    case "6":
      month = 4;
      break;
    case "july":
    case "7":
      month = 5;
      break;
    case "august":
    case "8":
      month = 6;
      break;
    case "september":
    case "9":
      month = 7;
      break;
    case "october":
    case "10":
      month = 8;
      break;
    case "november":
    case "11":
      month = 9;
      break;
    case "december":
    case "12":
      month = 10;
      break;
    default:
      innerHTMLText = "请输入有效的月份，可以是数字1-12或者英文月份名";
      document.getElementById("buh").innerHTML = innerHTMLText;
      return;
  }

  // 1、2月要减去年份后两位的1
  if (isJanOrFeb) {
    lastYearDigits -= 1;
  }

  const result = (day + Math.floor((2.6 * month) - 0.2) - (2 * centuryCode) + lastYearDigits + Math.floor(lastYearDigits / 4) + Math.floor(centuryCode / 4)) % 7;
  // 处理负数取模的问题
  const adjustResult = result < 0 ? result +7 : result;

  switch (adjustResult) {
    case 0:
      innerHTMLText = `日期 ${day}/${month}/${year} 对应的星期是：星期日`;
      break;
    case 1:
      innerHTMLText = `日期 ${day}/${month}/${year} 对应的星期是：星期一`;
      break;
    case 2:
      innerHTMLText = `日期 ${day}/${month}/${year} 对应的星期是：星期二`;
      break;
    case 3:
      innerHTMLText = `日期 ${day}/${month}/${year} 对应的星期是：星期三`;
      break;
    case 4:
      innerHTMLText = `日期 ${day}/${month}/${year} 对应的星期是：星期四`;
      break;
    case 5:
      innerHTMLText = `日期 ${day}/${month}/${year} 对应的星期是：星期五`;
      break;
    case 6:
      innerHTMLText = `日期 ${day}/${month}/${year} 对应的星期是：星期六`;
      break;
    default:
      innerHTMLText = "计算错误，请检查输入的日期是否合法";
  }
  // 计算完成后更新DOM
  document.getElementById("buh").innerHTML = innerHTMLText;
}

HTML部分 #

<p><strong>输入1700年1月1日到2999年12月31日之间的任意日期，查询对应的星期：</strong></p>
<form autocomplete="off" onsubmit="calculateDay(event)">
  <label for="day">日：</label><br />
  <input type="number" min="1" max="31" id="dayInput" name="day" required><br /><br />
  <label for="month">月：</label><br />
  <input type="text" id="monthInput" name="month" placeholder="支持数字1-12或英文月份名" required><br /><br />
  <label for="year">年：</label><br />
  <input type="number" min="1700" max="2999" id="yearInput" name="year" required><br /><br />
  <input type="submit" class="fancy-button" value="查询">
</form>
<br /><br />
<p id="buh"> - </p>

额外优化点 #

• 补充了负数取模的兼容处理，避免部分日期计算结果为负导致匹配不到星期
• 把结果文本变量放到函数内部，避免全局变量污染
• 统一了数字、英文月份的处理逻辑，输入格式兼容性更好
• 增加了错误提示，输入非法月份时会明确提示用户

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