javascript - 为什么这在 IE 和 Chrome 中都不起作用。表格似乎只在 Chrome 中正确显示？

Question

因此，当我发现我还需要它在 Internet Explorer 中运行时，我有一些我正在尝试使用 chrome 的代码......有人可以指导我如何让它在 IE 中完全运行吗？

我知道它可能必须有它自己的代码，我会让它发挥作用......如果我知道为什么 IE 不正确地格式化表格并且没有为每个 7 放置一行

<div id="calendar"></div>
<script>
    function calendar(month) {

        //Variables to be used later.  Place holders right now.
        var padding = "";
        var totalFeb = "";
        var i = 1;
        var testing = "";

        var current = new Date();
        var cmonth = current.getMonth(); // current (today) month
        var day = current.getDate();
        var year = current.getFullYear();
        var tempMonth = month + 1; //+1; //Used to match up the current month with the correct start date.
        var prevMonth = month - 1;

        //Determing if Feb has 28 or 29 days in it.  
        if (month == 1) {
            if ((year % 100 !== 0) && (year % 4 === 0) || (year % 400 === 0)) {
                totalFeb = 29;
            } else {
                totalFeb = 28;
            }
        }

        // Setting up arrays for the name of the months, days, and the number of days in the month.
        var monthNames = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"];
        var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thrusday", "Friday", "Saturday"];
        var totalDays = ["31", "" + totalFeb + "", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31"];

        // Temp values to get the number of days in current month, and previous month. Also getting the day of the week.
        var tempDate = new Date(tempMonth + ' 1 ,' + year);
        var tempweekday = tempDate.getDay();
        var tempweekday2 = tempweekday;
        var dayAmount = totalDays[month];

        // After getting the first day of the week for the month, padding the other days for that week with the previous months days.  IE, if the first day of the week is on a Thursday, then this fills in Sun - Wed with the last months dates, counting down from the last day on Wed, until Sunday.
        while (tempweekday > 0) {
            padding += "<td class='premonth'></td>";
            //preAmount++;
            tempweekday--;
        }
        // Filling in the calendar with the current month days in the correct location along.
        while (i <= dayAmount) {

            // Determining when to start a new row
            if (tempweekday2 > 6) {
                tempweekday2 = 0;
                padding += "</tr><tr>";
            }

            // checking to see if i is equal to the current day, if so then we are making the color of that cell a different color using CSS. Also adding a rollover effect to highlight the day the user rolls over. This loop creates the actual calendar that is displayed.
            if (i == day && month == cmonth) {
                padding += "<td class='currentday("+ i + ")'   onMouseOver='this.style.background=\"#00AA00\"; this.style.color=\"#FFFFFF\"' onMouseOut='this.style.background=\"aqua\"; this.style.color=\"black\"'>" + i + "</td>";
            } else {
                padding += "<td id='currentmonth("+ i +")' class='currentmonth' onclick='DaySelection(" + i + ");' onMouseOver='this.style.background=\"#00FF00\"' onMouseOut='this.style.background=\"#FFFFFF\"'>" + i + "</td>";
            }
            tempweekday2++;
            i++;
        }


        // Outputing the calendar onto the site.  Also, putting in the month name and days of the week.
        var calendarTable = "<table class='calendar'> <tr class='currentmonth'><th colspan='7'>" + monthNames[month] + " " + year + "</th></tr>";
        calendarTable += "<tr class='weekdays'>  <td>Sun</td>  <td>Mon</td> <td>Tues</td> <td>Wed</td> <td>Thurs</td> <td>Fri</td> <td>Sat</td> </tr>";
        calendarTable += "<tr>";
        calendarTable += padding;
        calendarTable += "</tr></table>";
        document.getElementById("calendar").innerHTML += calendarTable;
    }

    function go12() {
        var my_date = new Date();
        alert(my_date.getMonth());
        var MonthOFYear = my_date.getMonth();
        calendar(MonthOFYear);

    }

    if (window.addEventListener) {
        window.addEventListener('load', go12, false);
    } else if (window.attachEvent) {
        window.attachEvent('onload', go12);
    }

    function DaySelection(a) {
        var selection = document.getElementById('currentmonth(' + a + ')').textContent;
        alert(selection);
    }

</script>

标签： javascriptcsshtml

Answer 1

var tempDate = new Date(tempMonth + ' 1 ,' + year)

这是有问题的行，因为在 IE 11 中这不是有效日期。因此，稍后在您的 for 循环中

 if (tempweekday2 > 6) {
     tempweekday2 = 0;
     padding += "</tr><tr>";
 }

tempweekday2 不是数字，所以它永远不会进入 if 语句，因此永远不会创建新行。

为避免这种情况，您应始终根据 RFC 2822 或 ISO 8601 格式化您的代码，以避免这些错误。

在您的确切情况下，您可以通过替换来解决问题

var tempDate = new Date(tempMonth + ' 1 ,' + year)

和 ：

var tempDate = new Date(tempMonth + '-1-' + year)