为什么在一周中的几天之间会将额外的单元格添加到我的日历中?

时间:2015-07-02 05:48:45

标签: javascript

因此,对于我的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

谢谢你的时间!

0 个答案:

没有答案