为什么我在div JavaScript中获得额外的正斜杠

时间:2015-08-09 04:10:06

标签: javascript html dynamic calendar

出于某种原因,我在我动态填充的日历的标题之后,在他们自己的行上获得了8个正斜杠。它的基本代码如下:

<script type="text/javascript">
    function getCalendar() {
        var now = new Date();
        var thisMonth = now.getMonth();
        var months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
        var month = months[now.getMonth()];
        var thisYear = now.getFullYear();
        var firstDay = new Date(thisYear, thisMonth, 1, 0, 0, 0, 0);
        var firstDayOfWeek = firstDay.addDays(-firstDay.getDay()); // get the first date of the 5-week calendar
        var calendar = '<header> <h1 class="month-year">' + month + '&nbsp;&nbsp;&nbsp;&nbsp;' + thisYear + '</h1> ';
        calendar += '</header> <table> <tr> <th>Sun</th> <th>Mon</th> <th>Tue</th> <th>Wed</th> <th>Thu</th> <th>Fri</th> <th>Sat</th> </tr> ';
        var calMonth = new Array(6); // least amount that will contain an entire month every time
        calMonth[0] = new Array(7); // each week contains 7 days
        calMonth[1] = new Array(7);
        calMonth[2] = new Array(7);
        calMonth[3] = new Array(7);
        calMonth[4] = new Array(7);
        calMonth[5] = new Array(7);
        for(var i = 0; i < 6; i++) {
            for(var j = 0; j < 7; j++) {
                calMonth[i][j] = new Date(firstDayOfWeek); // input each date for the calendar into the array
                firstDayOfWeek = new Date(firstDayOfWeek.addDays(1));
            }
        }
        for(var i = 0; i < 6; i++) {
            calendar += '<tr>';
            for(var j = 0; j < 7; j++) {
            var currDate = new Date(calMonth[i][j]);
            day = currDate.getDate();
                if(day == now.getDate() && currDate.getMonth() == now.getMonth()) {
                    calendar += '<td class="moderate current-day">' + day + '</td>';
                } else if(currDate < now) {
                    calendar += '<td class="event heavy"><s>' + day + '</s></td>';
                } else if(currDate.getDay() >= 5) {
                    calendar += '<td class="light">' + day + '</td>/';
                } else if(currDate.getMonth() > now.getMonth() && currDate.getYear() == now.getYear()
                    || currDate.getMonth() < now.getMonth() && currDate.getYear() < now.getYear()) {
                    calendar += '<td class="event moderate next-month">' + day + '</td>';
                } else if(currDate.getMonth() < now.getMonth() && currDate.getYear() == now.getYear()
                    || currDate.getMonth() > now.getMonth() && currDate.getYear() > now.getYear()) {
                    calendar += '<td class="event heavy prev-month">' + day + '</td>';
                } else { calendar += '<td class="event light">' + day + '</td>'; }
            }
            calendar += '</tr>';
        }
        document.getElementById('calendar').innerHTML = calendar;
    }

    Date.prototype.addDays = function (n) {
        var time = this.getTime();
        var changedDate = new Date(time + (n * 24 * 60 * 60 * 1000));
        this.setTime(changedDate.getTime());
        return this;
}
</script>

当它呈现给<div class='calendar' id='calendar'></div>时,由于某种原因,它会在标题正下方的行上填充////////,该标题目前呈现August 2015

我在表格的标题和正文之间没有任何东西,在渲染日历之前(在onload事件期间),我在实际div中也没有任何内容。它的图像呈现如下:

enter image description here

此外,可以在this website查看具有当前样式的正在进行的版本。

任何人都可以帮助我解开这个谜团吗?

谢谢,

-C§

1 个答案:

答案 0 :(得分:1)

标签后面的for循环中有一个迷路正斜杠。它将在下面删除。

<script type="text/javascript">
function getCalendar() {
    var now = new Date();
    var thisMonth = now.getMonth();
    var months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
    var month = months[now.getMonth()];
    var thisYear = now.getFullYear();
    var firstDay = new Date(thisYear, thisMonth, 1, 0, 0, 0, 0);
    var firstDayOfWeek = firstDay.addDays(-firstDay.getDay()); // get the first date of the 5-week calendar
    var calendar = '<header> <h1 class="month-year">' + month + '&nbsp;&nbsp;&nbsp;&nbsp;' + thisYear + '</h1> ';
    calendar += '</header> <table> <tr> <th>Sun</th> <th>Mon</th> <th>Tue</th> <th>Wed</th> <th>Thu</th> <th>Fri</th> <th>Sat</th> </tr> ';
    var calMonth = new Array(6); // least amount that will contain an entire month every time
    calMonth[0] = new Array(7); // each week contains 7 days
    calMonth[1] = new Array(7);
    calMonth[2] = new Array(7);
    calMonth[3] = new Array(7);
    calMonth[4] = new Array(7);
    calMonth[5] = new Array(7);
    for(var i = 0; i < 6; i++) {
        for(var j = 0; j < 7; j++) {
            calMonth[i][j] = new Date(firstDayOfWeek); // input each date for the calendar into the array
            firstDayOfWeek = new Date(firstDayOfWeek.addDays(1));
        }
    }
    for(var i = 0; i < 6; i++) {
        calendar += '<tr>';
        for(var j = 0; j < 7; j++) {
        var currDate = new Date(calMonth[i][j]);
        day = currDate.getDate();
            if(day == now.getDate() && currDate.getMonth() == now.getMonth()) {
                calendar += '<td class="moderate current-day">' + day + '</td>';
            } else if(currDate < now) {
                calendar += '<td class="event heavy"><s>' + day + '</s></td>';
            } else if(currDate.getDay() >= 5) {
                calendar += '<td class="light">' + day + '</td>';
            } else if(currDate.getMonth() > now.getMonth() && currDate.getYear() == now.getYear()
                || currDate.getMonth() < now.getMonth() && currDate.getYear() < now.getYear()) {
                calendar += '<td class="event moderate next-month">' + day + '</td>';
            } else if(currDate.getMonth() < now.getMonth() && currDate.getYear() == now.getYear()
                || currDate.getMonth() > now.getMonth() && currDate.getYear() > now.getYear()) {
                calendar += '<td class="event heavy prev-month">' + day + '</td>';
            } else { calendar += '<td class="event light">' + day + '</td>'; }
        }
        calendar += '</tr>';
    }
    document.getElementById('calendar').innerHTML = calendar;
}

Date.prototype.addDays = function (n) {
    var time = this.getTime();
    var changedDate = new Date(time + (n * 24 * 60 * 60 * 1000));
    this.setTime(changedDate.getTime());
    return this;
}
</script>