Question

我在refdesk.com上从日历复制脚本和HTML时遇到了一些麻烦。我需要将JavaScript放在不同的样式表上，并使用这些函数在HTML页面上重新创建日历。这是我到目前为止，任何提示都会有所帮助。这是一项家庭作业，所以我不是在寻找答案。

JavaScript -

function initialize()
{
    buildCal();
    updateCalender();
}

var themonths = ['January','February','March','April','May','June',
'July','August','September','October','November','December'];

var todaydate = new Date();
var curmonth = todaydate.getMonth() + 1; //get current month (1-12)
var curyear = todaydate.getFullYear(); //get current year

function buildCal(month, year, cM, cH, cDW, cD, border)
{
var mn = ['January','February','March','April','May','June','July','August','September','October','November','December'];
var dim = [31,0,31,30,31,30,31,31,30,31,30,31];

var firstDaySelectedMonth = new Date(year, month - 1, 1); //DD replaced line to fix date bug when current day is 31st
firstDaySelectedMonth.od=firstDaySelectedMonth.getDay() + 1; //DD replaced line to fix date bug when current day is 31st

var todaydate = new Date(); //DD added
var scanfortoday = (year == todaydate.getFullYear() && month == todaydate.getMonth() + 1) ? todaydate.getDate() : 0; //DD added

dim[1] = (((firstDaySelectedMonth.getFullYear() % 100 != 0) && (firstDaySelectedMonth.getFullYear() %4 == 0)) || (firstDaySelectedMonth.getFullYear() % 400 == 0)) ? 29 : 28;
var t = '<div class="' + cM + '"><table class="' + cM + '" cols="7" cellpadding="0" border="' + brdr + '" cellspacing="0"><tr align="center">';
t += '<td colspan="7" align="center" class="' + cH + '">' + mn[month - 1] + ' - ' + year + '</td></tr><tr align="center">';
for (s = 0; s < 7; s++)
{
    t += '<td class="' + cDW + '">' + "SMTWTFS".substr(s,1) + '</td>';
    t += '</tr><tr align="center">';
}

for(i = 1;i <= 42; i++)
{
    var x = ((i-firstDaySelectedMonth.od >= 0) && (i-firstDaySelectedMonth.od < dim[month -1 ])) ? i-firstDaySelectedMonth.od + 1 : '&nbsp;';
        if (x == scanfortoday) //DD added
        {   
            x = '<span id="today">' + x + '</span>'; //DD added
            t += '<td class="' + cD + '">' + x +'</td>';
        }
        if(((i) % 7 == 0) && (i < 36))
        {
            t += '</tr><tr align="center">';
        }
}
return t += '</tr></table></div>';
}   
// update calender function
function updateCalendar(theSelection)
{
    var themonth = parseInt(theSelection[theSelection.selectedIndex].value) + 1;
    var calendarstr = buildCal(themonth, curyear, "main", "month", "daysofweek", "days", 0);

    if (document.getElementById)
    {
        document.getElementById("calendarspace").innerHTML = calendarstr;
    }
    document.write('<option value="'+(curmonth - 1) + '" selected="yes">Current Month</option>');
    for (i = 0; i < 12; i++) //display option for 12 months of the year
    {
    document.write('<option value="' + i + '">' + themonths[i] + ' ' + curyear + '</option>');
    }
}

HTML -

        <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="refdesk.css">
        <script src="refdesk.js"></script>
    </head>

    <body onload="initialize()">
    <!-- CALENDAR START -->
        <form>
            <div id="choicespace">
                <p>(This will be replaced with JavaScript-generated HTML)</p>
                <select onchange="updatecalendar(this.options)">
                <script>
                updatecalendar(theselection);
                </script>
                <option value="1" selected="yes">Current Month</option><option value="0">January 2013</option><option value="1">February 2013</option><option value="2">March 2013</option><option value="3">April 2013</option><option value="4">May 2013</option><option value="5">June 2013</option><option value="6">July 2013</option><option value="7">August 2013</option><option value="8">September 2013</option><option value="9">October 2013</option><option value="10">November 2013</option><option value="11">December 2013</option>
                </select>
            </div>
            <div id="calendarspace">
                <p>(This will be replaced with JavaScript-generated HTML)</p>
            </div>
        </form>
    </body>
</html>

Answer 1

首先，尝试确定您的javascript代码是如何工作的。看看calendar in javascript作为一个简单的例子。

Answer 2

就个人而言，我会更多地缩进以保持组织有序。我要做的另一件事就是制作更短的变量，因为有时我发现自己编码错误，因为我的变量名称很多。

初学者JavaScript帮助（功能）

2 个答案: