出于某种原因,我在我动态填充的日历的标题之后,在他们自己的行上获得了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 + ' ' + 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中也没有任何内容。它的图像呈现如下:
此外,可以在this website查看具有当前样式的正在进行的版本。
任何人都可以帮助我解开这个谜团吗?
谢谢,
-C§
答案 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 + ' ' + 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>