在这里,我有一个完整的html页面,用于创建日历,将其复制过来以查看其作用。
我下面有两个按钮,每个按钮可以增加一个月。我的问题是因为我可以在页面顶部实例化var month= date.getMonth()
,全局变量month
仅允许我按1递增和递减,如何将month
设置为局部变量,这样我就能增加到不止1。这是代码:我确定复制粘贴会起作用:
下面,我发布了我的按钮处理程序以增加月份/减少月份。
<script type="text/javascript">
printCalendar(year,month,divDestination);
function printCalendar(year,mth,divDestination){
var currentmonth = mth;
var myOutput=document.getElementById(divDestination)
myOutput.innerHTML=makeCalendar(year,mth)
}
function prevMonth(m){
m--;
var currentmonth = m;
alert(m);
if(m < 0)
{
m = 11;
year--;
}
printCalendar(year,currentmonth,divDestination);
}
function nextMonth(m){
m++;
var currentmonth = m;
if(m > 11)
{
m=0;
year++;
}
printCalendar(year,currentmonth,divDestination);
}
function test(div){
var myOutput=document.getElementById("divCalendar")
myOutput.innerHTML += eventmonth;
}
</script>
<div align="center" id="divCalendar"></div>
<div align="center" id="myButtons">
<input type="button" onclick="test('divCalendar')" value="Say hi" />
<input type="button" onclick="prevMonth(month,'divCalendar')" value="Previous"/>
<input type="button" onclick="nextMonth(month,'divCalendar')" value="Next" />
<input type="button" onclick="printCalendar(year,month,'divCalendar')" value="Reload Calendar" />
这是我的makeCalendar函数
var myDate = new Date();
var month = myDate.getMonth();
var year = myDate.getFullYear();
var divDestination="divCalendar";
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 getHoliday(monthSelected,theday)
{
monthSelected = monthSelected + 1
var holiday = ""
var HolidayName = new Array (1, 1, "New Year's Day",7, 1, "Canada Day",12, 25, "Christmas Day",12, 26, "Boxing Day", 2,14,"Valentine's Day")
for(var index = 0; HolidayName.length >= index; index++)
{
if(HolidayName[index] == monthSelected && HolidayName[index+1] == theday)
{
holiday = HolidayName[index+2]
}
}
return holiday
}
function makeCalendar(yr, mth)
{
var monthSelected = 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 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
{
var event = getHoliday(monthSelected, dayCtr)
txt += '<TD HEIGHT=' + cellHeight + '><FONT COLOR="' + dayColor + '"> <B>'
txt += dayCtr
txt += '</B></FONT><BR>' + event + '</TD>'
dayCtr++;
}
}
txt += '</TR>'
}
// close all basic table tags and output txt string
txt += '</TABLE></CENTER>'
return txt
}
最佳答案
让我们尝试将其进一步缩减至金钱部分。这基本上就是您在做什么。
var month = new Date().getMonth()
var nextMonth = function(m) {
m++;
setMonthSomewhere(m);
};
nextMonth(month);
因此,发生的事情是将全局变量传递给
nextMonth()
函数,该全局变量可以在任何地方访问。函数参数基本上声明一个局部变量,该变量设置为传入的值。现在,您将全局month
变量设置为1
,并且将完全不同的m
局部变量设置为nextMonth()
。然后,将局部变量1
增加到m
,这对全局变量没有影响。相反,只需不要将其传递。直接操作全局变量。
var month = new Date().getMonth()
var nextMonth = function() {
month++;
setMonthSomewhere(month);
};
nextMonth();
现在,
2
直接增加全局nextMonth()
变量,从而更改其值。