从今天开始计算数据并将其显示在可通过按钮选择的表格上

Question

我希望构建类似这样的东西：

一般条件是：
直到当月的第 10 天，应显示接下来的三个月。例如：今天的日期应该是 5 月 1 日、6 月 1 日和 7 月 1 日。
在当月的第 10 天之后，应该会出现下个月之后的月份。示例：4 月 11 日应创建 7 月 1 日、8 月 1 日和 9 月 1 日。
应考虑年度过渡。生成的数据应该每个都可以作为单选按钮进行选择，但一次只能选择一个。

我知道以下内容不起作用，但我是一个试图学习和理解 JavaScript 的初学者。

const date = new Date();

let day = date.getDate();
let month = date.getMonth() + 1;
let year = date.getFullYear();

if (day < 10) {
  let month_1 = month + 1
  let month_2 = month + 2
  let month_3 = month + 3
  if (month + 3 > 12) {
    let month_3 = 12 - month + 3
  }
  if (month + 2 > 12) {
    let month_2 = 12 - month + 2
  }
  if (month + 1 > 12) {
    let month_1 = 12 - month + 1
  }
  console.log(month_1, month_2, month_3)
} else {
  let month_1 = month + 2
  let month_2 = month + 3
  let month_3 = month + 4
  if (month + 4 > 12) {
    let month_3 = 12 - month + 4
  }
  if (month + 3 > 12) {
    let month_2 = 12 - month + 3
  }
  if (month + 2 > 12) {
    let month_1 = 12 - month + 2
  }
  console.log(month_1, month_2, month_3)
}

Answer 1

您可以使用

document

对象的方法动态生成 HTML 元素（如单选按钮）。使用

Date

类的方法，日期算法相当简单。 （但我最初忽略了您必须在移动月份之前将日期设置为 1 ，否则将一个月添加到 2023-03-31

 会得到 

2023-05-01

。）

重要的是给所有单选按钮相同的

name

，但不同的

value

s。提交表单后，请求将包含一个参数，如

startDate=01.05.2023

。 （最初我想使用 

date.toISOString()

，但它会生成 UTC 日期，这可能与用户时区中的日期不同。）

var form = document.querySelector("form");
var display = Intl.DateTimeFormat("de", {dateStyle: "long"});
var value = Intl.DateTimeFormat("de", {dateStyle: "medium"});
var date = new Date();
var day = date.getDate();
date.setDate(1);
if (day > 10) date.setMonth(date.getMonth() + 1);
for (var i = 0; i < 3; i++) {
  date.setMonth(date.getMonth() + 1); // wraps from Dec to Jan
  var button = document.createElement("input");
  button.type = "radio";
  button.name = "startDate";
  button.value = value.format(date);
  form.appendChild(button);
  form.appendChild(document.createTextNode(display.format(date)));
  form.appendChild(document.createElement("br"));
}

<form></form>

Answer 2

使用 var 而不是 let 是一种很好的做法，因为当您循环回到年初时，您正在重新分配接下来几个月 (month_1) 的值。只是为了确保可以在 if 语句之外访问变量的新值，通常是这种情况，并且可能是您遇到问题的原因。 我认为您遇到的一些问题是： 使用少于或多于 10 天，使用 let 并从错误的一侧减去 12，否则我认为其余的应该有效。 这是代码的固定版本：

if (day <= 10) {

var month_1 = month + 1
var month_2 = month + 2
var month_3 = month + 3
// Use variables inside if statements
if (month_1 > 12) {
// Subtract 12 from month
  var month_1 = month_1 - 12
}
if (month_2 > 12) {
  var month_2 = month_2 - 12
 }
 if (month_3 > 12) {
  var month_3 = month_3 - 12
}

console.log(month_1, month_2, month_3)
} else {
var month_1after10days = month + 3
var month_2after10days = month + 4
var month_3after10days = month + 5
if (month_1after10days > 12) {
  var month_1after10days = month_1after10days - 12
}
if (month_2after10days > 12) {
  var month_2after10days = month_2after10days - 12
}
if (month_3after10days > 12) {
  var month_3after10days = month_3after10days - 12
}
  console.log(month_1after10days, month_2after10days, month_3after10days)
}

如果你想一次只能选择一个单选按钮。您必须为输入添加一个名称，并使所有收音机都保持相同。

例如：

<input type="radio" name="Date" />

祝你编码之旅好运