1

ここでは、カレンダー作成用の完全な HTML ページを以下に示します。それをコピーして、その機能を確認してください。下に 2 つのボタンがあり、月を 1 ずつ増やすことができます。私の問題は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
        }
4

2 に答える 2

0

monthハンドラーでグローバル変数を使用していますが、<input type="button" onclick="nextMonth(month,'divCalendar')" value="Next" />そのグローバル変数を更新することはありません。

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 を呼び出したときに新しい月で更新されるようにします。

これは、日付オブジェクトを使用したソリューションを示すフィドルです

フィドル

于 2013-02-14T21:22:46.387 に答える
0

これをさらにお金の部分まで切り詰めてみましょう。これが基本的にあなたがしていることです。

var month = new Date().getMonth()

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

nextMonth(month);

したがって、どこからでもアクセスできるグローバルをnextMonth()関数に渡すとどうなりますか。また、関数の引数は基本的に、渡された値に設定されるローカル変数を宣言します。これで、グローバルmonth変数が に設定され、関数に対して1まったく異なるmローカル変数も に設定されました。次に、ローカル変数を にインクリメントしますが、これはグローバル変数には影響しません。nextMonth()1m2

代わりに、単純に渡さないでください。グローバルを直接操作してください。

var month = new Date().getMonth()

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

nextMonth();

nextMonth()グローバルmonth変数を直接インクリメントし、その値を変更するようになりました。

于 2013-02-14T21:07:09.157 に答える