Question

我正在尝试创建一个HTML页面，如果选择月份，正确的日期将显示在表格中。

我有一个今天月份的功能，用户可以在几个月之间切换，但我不确定如何获得所有的日子。
我不需要显示数字，只需要适当数量的空表行/表数据。

例如，当选择网页并且今天的月份为februari时，将显示包含当前日期的空表：即，将显示29个空表 - 如果您决定滚动则相同到另一天。

var month = new Date();
var index = month.getMonth();

var months = ["Januari", "Februari", "Mars", "April", "Maj", "Juni", "Juli", "Augusti", "September", "Oktober", "November", "December"];
document.getElementById("todayField").innerHTML = months[month.getMonth()];

function next() {
  var months = ["Januari", "Februari", "Mars", "April", "Maj", "Juni", "Juli", "Augusti", "September", "Oktober", "November", "December"];
  var nextMonth = index + 1 > 11 ? 0 : index + 1;
  index = nextMonth
  document.getElementById("todayField").innerHTML = months[nextMonth];
}

function prev() {
  var months = ["Januari", "Februari", "Mars", "April", "Maj", "Juni", "Juli", "Augusti", "September", "Oktober", "November", "December"];
  var nextMonth = index - 1 < 0 ? 11 : index - 1;
  index = nextMonth
    // console.log(nextMonth)
  document.getElementById("todayField").innerHTML = months[nextMonth];
}
document.getElementById("prev").addEventListener("click", function() {
  prev();
})
document.getElementById("next").addEventListener("click", function() {
  next();
})

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title></title>
  </head>

  <body>
    <p>Click to change day</p>
    <button type="button" name="btnPrev" onclick="prev()">&lt;</button>
    <button type="button" name="btnNext" onclick="next()">&gt;</button>
    <p id="todayField"></p>
    <p>You can find the days below</p>
  </body>

</html>

提前致谢！ :)

Answer 1

我会创建一个函数，返回所选月份的天数。 https://stackoverflow.com/a/47188148/3793309拥有它所需要的：

function daysInMonth(month, year) {
    var days;
    switch (month) {
        case 1: // Feb, our problem child
            var leapYear = ((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0);
            days = leapYear ? 29 : 28;
            break;
        case 3: case 5: case 8: case 10: 
            days = 30;
            break;
        default: 
            days = 31;
        }
    return days;
},

您可以使用月份索引调用此函数，例如三月：

[...]
var months = ["Januari","Februari","Mars","April","Maj","Juni","Juli","Augusti","September","Oktober", "November", "December"];
var index = months.indexOf("Mars");
var year = 2018;
var count = daysInMonth(index, year);

这应该足以满足您的需求。

HTH

Answer 2

我添加了一个绘制表的函数，并为您提供了一个函数的实现，该函数接收月份的名称作为输入并返回其中的天数。

请注意，我添加了另一个<p>元素，其中已经准备好了表格。

您可以使用 @jayjay bricksoft 的答案来帮助您。

祝你好运！

var month = new Date();
var index = month.getMonth();

var months = ["Januari", "Februari", "Mars", "April", "Maj", "Juni", "Juli", "Augusti", "September", "Oktober", "November", "December"];
document.getElementById("todayField").innerHTML = months[month.getMonth()];

// Draws a table for the current month
drawTable(daysInMonth(index, 2018));

function next() {
  var months = ["Januari", "Februari", "Mars", "April", "Maj", "Juni", "Juli", "Augusti", "September", "Oktober", "November", "December"];
  var nextMonth = index + 1 > 11 ? 0 : index + 1;
  index = nextMonth;
  document.getElementById("todayField").innerHTML = months[nextMonth];
  drawTable(daysInMonth(index, 2018));
}

function prev() {
  var months = ["Januari", "Februari", "Mars", "April", "Maj", "Juni", "Juli", "Augusti", "September", "Oktober", "November", "December"];
  var nextMonth = index - 1 < 0 ? 11 : index - 1;
  index = nextMonth;

  // console.log(nextMonth)
  document.getElementById("todayField").innerHTML = months[nextMonth];
  drawTable(daysInMonth(index, 2018));
}

function daysInMonth(month, year) {
  var days;
  switch (month) {
    case 1: // Feb, our problem child
      var leapYear = ((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0);
      days = leapYear ? 29 : 28;
      break;
    case 3:
    case 5:
    case 8:
    case 10:
      days = 30;
      break;
    default:
      days = 31;
  }
  return days;
}

function drawTable(daysInMonth) {
  var cellsToDraw = daysInMonth;
  var table = document.getElementById("table");
  table.innerHTML = "";
  for (r = 0; r < (daysInMonth / 7); r++) {
    var newRow = document.createElement("tr");
    table.appendChild(newRow);
    for (c = 0; c < 7 && cellsToDraw > 0; c++) {
      var newCell = document.createElement("td");
      newRow.appendChild(newCell);
      newCell.innerHTML = "&nbsp;";
      cellsToDraw--;
    }
  }
}

td {
  border: solid 1px black;
  width: 30px;
  height: 30px;
}

<html>

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <p>Click to change day</p>
  <button type="button" name="btnPrev" onclick="prev()">&lt;</button>
  <button type="button" name="btnNext" onclick="next()">&gt;</button>
  <p id="todayField"></p>
  <p>You can find the days below</p>
  <div>
    <table id="table"></table>
  </div>
</body>

</html>

如何通过javascript根据变量显示内容？

2 个答案: