如何通過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