如何使用javascript将数组中的值显示到日历中

时间:2013-01-10 21:54:49

标签: javascript for-loop calendar logic

这里我有一个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
    }
}   

以下是代码,该事件将在功能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) 

}

1 个答案:

答案 0 :(得分:0)

因为您有else { return "" },然后在if...else语句之外return name。因此,无论条件是真还是假,您的函数将在循环的第一次运行期间终止,如果条件为真则返回名称,否则返回空字符串。

另外,我认为你需要在每个循环中将索引增加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 '';
}