基于当前日期生成可选月份单选按钮的JavaScript实现需求

你的代码存在的问题 #

• 变量作用域错误：在if块内用let重新声明month_1等变量，这会创建一个局部变量，而非更新外层的同名变量，导致最终console.log输出的还是初始计算的未修正值。
• 跨年月份计算错误：比如当前是11月（month=11），month+3=14，正确结果应为次年2月，但你的计算式12-11+3=4会得到错误的4月。
• 未处理年份变更：当月份超过12时，年份需要递增，但你的代码完全没有考虑年份的变化。
• 未生成页面元素：仅在控制台输出月份，没有将结果转换为页面上的单选按钮。

修正后的完整代码 #

HTML结构 #

<div id="date-radio-container"></div>

JavaScript代码 #

// 获取当前日期信息
const currentDate = new Date();
const currentDay = currentDate.getDate();
const currentMonth = currentDate.getMonth() + 1; // 转换为1-12的月份格式
const currentYear = currentDate.getFullYear();

// 确定起始偏移：10日及之前从下一月开始，10日之后从下下月开始
const startOffset = currentDay <= 10 ? 1 : 2;

// 生成三个目标日期（包含年份和月份）
const targetDates = [];
for (let i = 0; i < 3; i++) {
  const totalMonths = currentMonth + startOffset + i;
  // 计算年份：总月份减1后除以12取整，得到需要增加的年数
  const newYear = currentYear + Math.floor((totalMonths - 1) / 12);
  // 计算月份：总月份减1后取模12，再加1确保是1-12的格式
  const newMonth = ((totalMonths - 1) % 12) + 1;
  targetDates.push({ year: newYear, month: newMonth });
}

// 获取页面容器，用于放置单选按钮
const container = document.getElementById('date-radio-container');

// 动态生成单选按钮和标签
targetDates.forEach((date, index) => {
  // 创建单选按钮元素
  const radioBtn = document.createElement('input');
  radioBtn.type = 'radio';
  radioBtn.name = 'target-date'; // 相同name属性确保单选功能
  radioBtn.value = `${date.year}-${String(date.month).padStart(2, '0')}-01`;
  radioBtn.id = `date-option-${index}`;

  // 创建标签元素，关联单选按钮
  const label = document.createElement('label');
  label.htmlFor = radioBtn.id;
  label.textContent = `${date.year}年${date.month}月1日`;

  // 将元素添加到容器
  container.appendChild(radioBtn);
  container.appendChild(label);
  container.appendChild(document.createElement('br')); // 添加换行优化显示
});

代码说明 #

1. 日期基础处理：通过Date对象获取当前日、月、年，将getMonth()返回的0-11格式转换为1-12。
2. 起始偏移判断：用三元运算符简洁判断起始月份的偏移量，符合需求规则。
3. 跨年日期计算：
   • 用totalMonths累加得到目标月份的总计数，通过数学运算自动处理跨年情况。
   • newYear通过总月份数计算需要递增的年份，newMonth通过取模运算确保始终为1-12的有效格式。
4. DOM元素生成：
   • 动态创建单选按钮，设置相同name属性实现单选功能。
   • 创建关联标签，提升用户交互体验，点击文本即可选择对应选项。

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