通過InnerHTML動態創建日曆不工作

最初我有這個代碼工作，但我決定不是每次動態創建表，而是隻需要在表中填充文本。我不知道這是否是動態創建日曆的最有效方式，因此請告訴我是否有更好的方法（我更喜歡將它保留爲JavaScript）。我不知道爲什麼我的表不再被創建，所以任何幫助將不勝感激。通過InnerHTML動態創建日曆不工作

HTML的

<head> 
    <meta charset="utf-8"> 

    <link rel="stylesheet" type="text/css" href="styles.css"> 

    <!-- Dynamically create the calendar --> 
    <script type="text/javascript" src="calendar.js"> 
    window.onload = function(){ 
     var cal = new Calendar(); 
     cal.drawCalendar(); 
    } 
    </script> 

</head> 

<body> 

    <!-- Create the calendar object --> 
    <table class="calendar"> 
    <tr> 
     <th class="header" colspan="7"></th> 
    </tr> 
    <tr> 
     <td class="headerdays">Sun</td> 
     <td class="headerdays">Mon</td> 
     <td class="headerdays">Tue</td> 
     <td class="headerdays">Wed</td> 
     <td class="headerdays">Thu</td> 
     <td class="headerdays">Fri</td> 
     <td class="headerdays">Sat</td> 
    </tr> 
    <tr class ="days"> 
    </tr> 
</table> 

    <!-- Add buttons to change the calendar month --> 
    <button class="calButton" onclick="cal.prevMonth()"><span> Prev </span></button> 
    <button class="calButton" onclick="cal.nextMonth()"><span> Next </span></button> 

</body>

的JavaScript -

// these are labels for the days of the week 
cal_days_labels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; 

// these are human-readable month name labels, in order 
cal_months_labels = ['January', 'February', 'March', 'April', 
       'May', 'June', 'July', 'August', 'September', 
       'October', 'November', 'December']; 

// these are the days of the week for each month, in order 
cal_days_in_month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; 

// this is the current date 
cal_current_date = new Date(); 

//Constructor function for Calendar 
function Calendar(month, year) { 
    this.month = (isNaN(month) || month == null) ? cal_current_date.getMonth() : month; 
    this.year = (isNaN(year) || year == null) ? cal_current_date.getFullYear() : year; 

} 

//Generates the needed HTML for the calendar 
Calendar.prototype.generateHTML = function(){ 

    // get first day of month 
    var firstDay = new Date(this.year, this.month, 1); 
    var startingDay = firstDay.getDay(); 

    // find number of days in month 
    var monthLength = cal_days_in_month[this.month]; 

    // Compensate for leap year 
    if (this.month == 1) { // February only! 
    if((this.year % 4 == 0 && this.year % 100 != 0) || this.year % 400 == 0){ 
     monthLength = 29; 
    } 
    } 

    // Fill in month and year for header 
    var monthName = cal_months_labels[this.month]; 
    document.getElementsByClassName("header")[0].innerHTML = monthName + "&nbsp;" + this.year; 

    // fill in the days 
    var html += ''; 
    var day = 1; 
    // this loop is for is weeks (rows) 
    for (var i = 0; i < 9; i++) { 
    html += '<tr>'; 
    // this loop is for weekdays (cells) 
    for (var j = 0; j <= 6; j++) { 
     html += '<td class="day">'; 
     if (day <= monthLength && (i > 0 || j >= startingDay)) { 
     html += day; 
     day++; 
     } 
     html += '</td>'; 
    } 
    html += '</tr>'; 
    // stop making rows if we've run out of days 
    if (day > monthLength) { 

     break; 
    } 
    } 

    //Write the days to the screen 
    document.getElementsByClassName("days")[0].innerHTML = html; 

} 

//Writes the calendar to the screen 
Calendar.prototype.drawCalendar = function() { 
    //Generates the HTML and write HTML to screen 
    this.generateHTML(); 
} 

//Sets the calendar to previous month 
Calendar.prototype.prevMonth = function() { 
    //Set the month back by one 
    this.month = (this.month != 0) ? this.month - 1 : 11; 
    this.year = (this.month != 11) ? this.year : this.year - 1; 
    this.drawCalendar(); 
} 

//Sets the calendar to next month 
Calendar.prototype.nextMonth = function() { 
    //Set the month forward by one 
    this.month = (this.month != 11) ? this.month + 1 : 0; 
    this.year = (this.month != 0) ? this.year : this.year + 1; 
    this.drawCalendar(); 
}

來源

2016-03-06 ScottLang

你應該爲你的代碼不同<script>塊：

<script type="text/javascript" src="calendar.js"></script> 
<script type="text/javascript"> 
    window.onload = function() { 
     var cal = new Calendar(); 
     cal.drawCalendar(); 
    } 
    ... 
</script>

來源

2016-03-06 17:30:00 avrahamcool

通過InnerHTML動態創建日曆不工作

回答

相關問題