因此,对于我的JavaScript课程,我们的书将指导我们创建日历。我以为我完全按照书中出现的方式复制了所有内容,但也许没有。出于某种原因,在一周的日期名称之间插入空白单元格。这显然不应该发生。我做错了什么?
这是我的完整脚本:
<html>
<head>
<title>Web 240 Assignment 3</title>
<style type="text/css">
table {
background: #ccc;
border: 1px solid #999;
padding: 3px;
}
#calendar_head {
background: red;
color: white;
font-weight: bold;
text-align: center;
}
.calendar_weekdays {
background: white;
border-bottom: 5px solid #ccc;
font-weight: bold;
}
.calendar_dates {
background: white;
padding: 5px 25px 10px 5px;
}
</style>
<script type="text/javascript">
function calendar(){
document.write('<table id="calendar_table">');
var calDate = new Date();
writeCalTitle(calDate);
writeDayNames();
writeCalDays(calDate);
document.write('</table>');
}
function writeCalTitle(calendarDay){
var monthName = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
var thisMonth = calendarDay.getMonth();
var thisYear = calendarDay.getFullYear();
document.write("<tr>");
document.write('<th id="calendar_head" colspan="7">');
document.write(monthName[thisMonth] + " " + thisYear);
document.write('</th>');
document.write('</tr>');
}
function writeDayNames(){
var dayName = new Array("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat");
document.write('<tr>');
for(var i = 0; i < dayName.length; i++){
document.write('<th class="calendar_weekdays">' + dayName[i] + "<th>");
}
document.write("</tr>");
}
function daysInMonth(calendarDay){
var thisYear = calendarDay.getFullYear();
var thisMonth = calendarDay.getMonth();
var dayCount = new Array(31, 28, 31, 30, 31, 30, 31,31, 30, 31, 30, 31);
if(thisYear % 4 == 0){
if((thisYear % 100 != 0) || (thisYear % 400 == 0)){
dayCount[1] = 29;
}
}
return dayCount[thisMonth];
}
function writeCalDays(calendarDay){
var dayCount = 1;
var totalDays = daysInMonth(calendarDay);
calendarDay.setDate(1);
var weekDay = calendarDay.getDay();
document.write('<tr>');
for(var i = 0; i < weekDay; i++){
document.write('<td></td>');
}
while(dayCount <= totalDays){
if(weekDay == 0) document.write('<tr>');
document.write('<td class="calendar_dates">' + dayCount + "</td>");
if(weekDay == 6) document.write('</tr>');
dayCount++;
calendarDay.setDate(dayCount);
weekDay = calendarDay.getDay();
}
}
</script>
</head>
<body>
<script type="text/javascript">calendar();</script>
</body>
</html>
这是输出: http://imgur.com/bzDXM1R
谢谢你的时间!