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

Question

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

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

因此，例如，当选择该网页且今天的月份是februari ，将显示一个带有当前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;
},

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

[...]
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);

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

心连心

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 个解决方案

解决方案1
2 2018-02-02 09:33:09

解决方案2
1 已采纳 2018-02-02 10:01:28

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

问题描述

2 个解决方案

解决方案1 2 2018-02-02 09:33:09

解决方案2 1 已采纳 2018-02-02 10:01:28

解决方案1
2 2018-02-02 09:33:09

解决方案2
1 已采纳 2018-02-02 10:01:28