关于星期名称数字映射数组创建及指定日期星期名称获取的技术问询

看起来你想要实现一个功能：输入每月第一天对应的星期数字，再输入当月的具体日期，计算并输出该日期对应的星期名称。我会帮你梳理原代码的问题，并提供一个更完善、符合需求的实现方案。

原代码存在的核心问题 #

1. 变量与DOM元素命名不直观（比如id="name"的输入框实际用于填写第一天的星期数字，容易造成混淆）
2. 最终仅输出星期对应的数字，未转换成用户需要的星期名称
3. 星期数字的计算逻辑冗余，可通过统一的取模运算简化
4. 缺少输入合法性校验（比如星期数字应限制在1-7之间，日期应在1-31之间）

改进后的完整实现方案 #

下面是修复并优化后的代码，包含星期名称映射、输入校验、简化的计算逻辑，以及基础的界面美化：

1. HTML 结构（优化命名，增强可读性）

<div class="main">
  <div class="wrapper">
    <div class="input-box">
      <label>每月第一天的星期数字（1=周一，7=周日，例：周三填3）</label>
      <input type="number" id="firstDayNum" min="1" max="7" placeholder="如：周三填3">
      <br>
      <span class="error-message" id="firstDayError"></span>
    </div>

    <div class="input-box">
      <label>要查询的日期（1-31）</label>
      <input type="number" id="targetDate" min="1" max="31" placeholder="如：15">
      <br>
      <span class="error-message" id="dateError"></span>
    </div>

    <button type="button" class="btn" onclick="calculateWeekday()">计算星期</button>

    <div class="result-box">
      <label>查询结果：</label>
      <input type="text" id="weekdayResult" placeholder="如：Wednesday" readonly>
      <br>
      <span class="error-message" id="resultError"></span>
    </div>
  </div>
</div>

2. CSS 基础样式（提升用户体验）

.main {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5f5;
  margin: 0;
  font-family: Arial, sans-serif;
}

.wrapper {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  width: 320px;
}

.input-box, .result-box {
  margin-bottom: 1.5rem;
}

label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #333;
}

input[type="number"], input[type="text"] {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

.error-message {
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

.btn {
  width: 100%;
  padding: 0.75rem;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

.btn:hover {
  background-color: #0056b3;
}

3. JavaScript 逻辑（修复计算，添加星期映射）

// 定义星期数字与名称的映射数组（索引0对应数字1，匹配1=周一、7=周日的规则）
const weekdayNames = [
  'Monday', 
  'Tuesday', 
  'Wednesday', 
  'Thursday', 
  'Friday', 
  'Saturday', 
  'Sunday'
];

// 输入合法性校验函数
function validateInputs() {
  const firstDayNum = Number(document.getElementById('firstDayNum').value);
  const targetDate = Number(document.getElementById('targetDate').value);
  let isValid = true;

  // 校验第一天的星期数字
  if (isNaN(firstDayNum) || firstDayNum < 1 || firstDayNum > 7) {
    document.getElementById('firstDayError').textContent = '请输入1-7之间的数字（对应周一到周日）';
    isValid = false;
  } else {
    document.getElementById('firstDayError').textContent = '';
  }

  // 校验目标日期
  if (isNaN(targetDate) || targetDate < 1 || targetDate > 31) {
    document.getElementById('dateError').textContent = '请输入1-31之间的有效日期';
    isValid = false;
  } else {
    document.getElementById('dateError').textContent = '';
  }

  return { isValid, firstDayNum, targetDate };
}

// 核心计算函数
function calculateWeekday() {
  const { isValid, firstDayNum, targetDate } = validateInputs();
  if (!isValid) return;

  // 核心逻辑：计算目标日期与第一天的间隔天数，结合第一天的星期数字，通过取模处理循环
  const daysDiff = targetDate - 1;
  const totalOffset = firstDayNum + daysDiff - 1; // 减1适配数组0索引
  const weekdayIndex = totalOffset % 7;

  // 映射为星期名称并显示
  document.getElementById('weekdayResult').value = weekdayNames[weekdayIndex];
  document.getElementById('resultError').textContent = '';
}

关键改进说明 #

1. 清晰的命名规范：将模糊的ID（如name、date）改为firstDayNum、targetDate，提升代码可读性
2. 星期名称映射：通过weekdayNames数组直接将计算出的索引转换为英文星期名称，解决原代码仅输出数字的问题
3. 简化的计算逻辑：用totalOffset % 7统一处理所有日期场景，无需分条件判断，逻辑更简洁可靠
4. 完整的输入校验：添加数字合法性与范围校验，并给出明确的错误提示
5. 用户友好界面：补充基础样式与输入标签，降低用户理解成本

使用示例 #

• 若当月第一天是Wednesday（周三），在第一个输入框填3
• 若查询15号的星期，在第二个输入框填15
• 点击「计算星期」按钮，结果框将显示对应的星期名称

备注：内容来源于stack exchange，提问作者BIGGIE Ol