如何使用JavaScript將數組中的值顯示到日歷上

Question

在這里，我有一個Java腳本，它將根據document.write(makeCalendar(2013,0))選擇的年和月來構建日歷。第一個參數是年份，第二個參數是月份。 我已經工作到某種程度，它僅顯示當天的日歷事件，但是無法在我的HolidayName[]顯示日期的其余部分，這是顯示事件的數組和循環，盡管稍后會添加新事件。 。 它只能顯示第一個日期，我不知道為什么，因為它應該一直循環播放。 下面是我的循環，然后是javascript。

var HolidayName = new Array (0, 1, "New Years Day",6, 1, "Canada Day",11, 25, "Christmas Day",11, 26, "Boxing Day")
function getHoliday(month, day)
{
    for(var index = 0; HolidayName.length > index; index++)
    {
        if(HolidayName[index] == month && HolidayName[index+1] == day)
        {
            var name = HolidayName[index+2]
        }
        else
        {
            return ""
        }
        return name
    }
}   

下面是代碼，該事件在functon getHoliday(mth, dayCtr)的顯示日期部分中顯示。

function leapYear(yr) { 
if (yr < 1000) yr+=1900
return((yr%4 == 0) && ((yr%100 == 0) || (yr%400 ==0)))
}

function startCol(width, height, color){
return('<TD WIDTH=' + width + ' HEIGHT=' + height + '>' + '<FONT COLOR="' + color + '">');
}

function makeCalendar(yr, mth){

var months    = new Array("Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec")
var days      = new Array(31, leapYear(yr)?29:28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31)
var weekDays  = new Array("Sun", "Mon", "Tues", "Wed", "Thurs", "Fri", "Sat")
var HolidayName = new Array (0, 1, "New Years Day",6, 1, "Canada Day",11, 25, "Christmas Day",11, 26, "Boxing Day")

function getHoliday(month, day)
{
    for(var index = 0; HolidayName.length > index; index++)
    {
        if(HolidayName[index] == month && HolidayName[index+1] == day)
        {
            var name = HolidayName[index+2]
        }
        else
        {
            return ""
        }
        return name
    }
}   

var mthSz         = days[mth]
var mthName       = months[mth]
var firstDyofMnth = new Date(yr, mth, 1)
var firstDay      = firstDyofMnth.getDay() + 1
var numRows       = Math.ceil((mthSz + firstDay-1)/7)
var mthNameHeight = 50

var borderWidth   = 2
var cellSpacing   = 4 
var cellHeight    = 80 

var hdrColor      = "midnightblue" 
var hdrSz         = "+3" 
var colWidth      = 100 

var dayCellHeight = 25 
var dayColor      = "black" 
var dayCtr    = 1


// Build the HTML Table 
var txt = '<CENTER>'
txt += '<TABLE BORDER=' + borderWidth + ' CELLSPACING=' + cellSpacing + '>' 

//Show Month Name and Year
txt += '<TH COLSPAN=7 HEIGHT=' + mthNameHeight + '>' 
txt += '<FONT COLOR="' + hdrColor + '" SIZE=' + hdrSz + '>' 
txt += mthName + ' ' + year + '</FONT>' + '</TH>'

// Show Days of the Week 
txt += '<TR ALIGN="center" VALIGN="center">'
for (var dy = 0; dy < 7; ++dy) {
    txt += startCol(colWidth, dayCellHeight, dayColor) + weekDays[dy] + '</FONT></TD>' 
}
txt += '</TR>'

// Show Dates in Calendar
for (var row=1; row <= numRows; ++row) {
    txt += '<TR ALIGN="right" VALIGN="top">'
    for (var col = 1; col <= 7; ++col) {
        if (((col < firstDay) && (row==1)) || (dayCtr>mthSz))
            {txt += '<TD BGCOLOR="Gainsboro"><BR></TD>'}
        else
            {
            txt += '<TD HEIGHT=' + cellHeight + '><FONT COLOR="' + dayColor + '"> <B>'
            txt += dayCtr 
            txt += '</B></FONT><BR>' + getHoliday(mth,dayCtr) + '</TD>'
            dayCtr++;
            }
    }
    txt += '</TR>'
}

// close all basic table tags and output txt string
txt += '</TABLE></CENTER>'
document.write(txt) 

}

Answer 1

因為您還有else { return "" } ，然后在if...else語句之外，所以return name 。 因此，無論條件是true還是false，您的函數都會在循環的第一次運行期間終止，如果條件為true，則返回名稱，否則返回空字符串。

另外，我認為您需要在每個循環上將索引增加3，而不是1； 並且您應該使用分號結束每一行（除非它是{}塊的開始或結束）。

var HolidayName = new Array(0, 1, "New Years Day", 6, 1, "Canada Day", 11, 25, "Christmas Day", 11, 26, "Boxing Day");

function getHoliday(month, day) {
  for (var index = 0; index + 2 < HolidayName.length; index+=3) {
    if (HolidayName[index] == month && HolidayName[index + 1] == day) {
      return HolidayName[index + 2];
    }
  }
  return '';
}