在 javascript 中创建一个局部变量来跟踪日历上的月份。

Posted 2023-05-08

【中文标题】在 javascript 中创建一个局部变量来跟踪日历上的月份。

【英文标题】：Creating a local variable to keep track of months on a calendar in javascript.

【发布时间】：2013-01-30 18:39:05

【问题描述】：

我在下面有一个用于创建日历的完整 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
        

【问题讨论】：

您能否将该代码 sn-p 缩减为与您的问题相关的部分？另外，请解释“全局变量月只允许我增加和减少1”。这有点奇怪。它如何阻止你做你想做的事？

是的，虽然你可能想看全部

最好尽可能简单地描述问题，但不要更简单。

除了 +1 或 -1 之外，我不能增加我的月份，因为我的全局变量 month 是 date.getMonth()，这意味着今天的月份等于 1。现在我的问题是我只能在 1 月和 3 月递增，因为我的全局变量 month 始终等于 1，因此能够设置一个局部变量来跟踪我所在的月份以及今年的当前月份。

【参考方案1】：

让我们尝试将其进一步精简到金钱位。这基本上就是你正在做的事情。

var month = new Date().getMonth()

var nextMonth = function(m) 
  m++;
  setMonthSomewhere(m);
;

nextMonth(month);

所以发生的情况是，您将在任何地方都可以访问的全局变量传递给nextMonth() 函数。函数参数基本上声明了一个局部变量，该变量设置为传入的值。您现在有一个全局变量month 设置为1，一个完全不同的m 局部变量nextMonth() 也设置为1。然后将局部变量m 增加到2，这对全局变量没有影响。

相反，干脆不要传入。直接操作全局。

var month = new Date().getMonth()

var nextMonth = function() 
  month++;
  setMonthSomewhere(month);
;

nextMonth();

现在nextMonth() 直接增加全局month 变量，改变它的值。

【参考方案2】：

您正在处理程序 <input type="button" onclick="nextMonth(month,'divCalendar')" value="Next" /> 中使用全局变量 month，但您从未更新该全局变量。

为什么不尝试从 nextMonth 函数中删除第一个参数，而不是使用 m 来使用月份。

function nextMonth()
  month++;    
  if(month > 11)
  
    month=0;
    year++;
  
  printCalendar(year,month,divDestination);

（请注意您对“currentMonth”变量的使用也可能是错误的，因此我将其删除）

但我认为您的设计有点缺陷 - 因为您使用全局变量并将它们放在全局命名空间中，如果您需要渲染 2 个日历或其他一些 javascript 想要渲染，您将很难使用变量名“月”或“年”。

编辑（添加更好的解决方案）

我建议您不要将数字传递给您的函数，而是传递一个完整的日期对象 - 因为这会使代码更简单。

function printCalendar(date, divDestination) 
    var myOutput=document.getElementById(divDestination)
    myOutput.innerHTML=makeCalendar(date.getFullYear(), date.getMonth());


function nextMonth(date, divDestination) 
    date.setMonth(date.getMonth()+1);
    printCalendar(date, divDestination);


function prevMonth(date, divDestination) 
    date.setMonth(date.getMonth()-1);
    printCalendar(date, divDestination);

现在因为你传递了一个 Date 对象，nextMonth 和 prevMonth 函数实际上修改了这个对象，这样下次你调用 Date 时就会更新为新的月份。

这是一个使用日期对象显示解决方案的小提琴

Fiddle