使用 javascript 循环数月

Question

我有一个日期 texbox 来选择一个日期，通过使用该选定的月份，我需要遍历这些月份。例如，如果我选择今天的日期，我需要将 3 月显示为开始月份，并在月份中循环 n 次数。但我在这里面临的问题是，在 12 月之后，我收到了 undefined 错误。

知道怎么解决吗？

小提琴：https://jsfiddle.net/anoopcr/fyaeyg7r/

HTML：

<div class="inputQL">
  <div class="InputQuest">Loan start date</div>
  <div> 
    <input type="date" id="date" class="date"></input>
  </div>
  <div id="hiddendate" class="hiddendate"></div>
</div>

<div id="table_header" class="table_header">
  <table cellpadding="15" border="1">
    <tr>
      <td width="100" align="center"><b>SI No</b></td>
      <td width="100" align="center"><b>month</b></td>
      <td width="100" align="center"><b>balance</b></td>
    </tr>
  </table>
</div>

<div id="table" class="table"> </div>

Javascript：

date.onchange = function() {
  table();
}

$(document).ready(function() {
  document.getElementById("date").valueAsDate = new Date();
  table();
})


function table() {
  var mo = new Array(12);
  mo[0] = "January";
  mo[1] = "February";
  mo[2] = "March";
  mo[3] = "April";
  mo[4] = "May";
  mo[5] = "June";
  mo[6] = "July";
  mo[7] = "August";
  mo[8] = "September";
  mo[9] = "October";
  mo[10] = "November";
  mo[11] = "December";

  var date = new Date(document.getElementById("date").value);
  var day = date.getUTCDate();
  var month = mo[date.getUTCMonth()];
  var year = date.getFullYear();

  document.getElementById("hiddendate").innerHTML = month;

  var loanstart = month;
  var amnttext = 1;
  var payment_counter = 1;

  var table = "";

  table += "<table cellpadding='15' border='1'>";

  var n = 0;
  while (amnttext < 24) {

    var loanstart = mo[date.getUTCMonth() + n];

    //display rows
    table += "<table cellpadding='15' border='1'>";
    table += "<tr>";

    table += "<td width='100'>" + payment_counter + "</td>";
    table += "<td width='100'>" + loanstart + "</td>";
    table += "<td width='100'>" + amnttext + "</td>";

    if (n < 12) {
      n++;
    } else {
      n = 0;
    }

    amnttext++;

    payment_counter++;

  table += "</table>";

  document.getElementById("table").innerHTML = table;
}

Answer 1

一个问题是您访问数组mo 超出了它的限制

var loanstart = mo[date.getUTCMonth()+n];

以 12 为模，应该修复访问冲突：

var loanstart = mo[(date.getUTCMonth()+n) % 12];

P.S.：正如@Vimarsh 观察到的，使用模数时可以完全删除条件if (n < 12)。

Answer 2

在您的代码中，当 n = 11 时，您将其递增而不是设为 0。 现在 n = 12，你会得到错误，因为 mo[12] 超出范围。

你可以把sn-p改成

if (n<11) {
    n++;
} else {
    n=0;
} 

不过，我同意 @milbrandt 的回答是处理这个用例的更简洁的方式。