• 当前位置:首页>>JavaScript教程>>JavaScript基础教程>>HTML 组件(HTML COMPONENTS)之二
  • HTML 组件(HTML COMPONENTS)之二
  •   ===编写日历一===

      当calendar.HTML调用 MYCAL:CALENDAR,当月的日历将会显示在页面中,函数setCal()是主要程序段,它初始化一些变量并调用drawCal()函数。我们也使用了三个别的函数:getMonthName()、 getDays() 和 leapYear()。让我们从最后一个函数开始:


      getDays()函数接收哪月值和哪年值,并且建立一个有12个元素的数组,用来存放每月的天数,哪一年用来决定是不是闰年,在闰年中二月是29天,而不是闰年是28天。该函数返回指定月份的天数。以下是getDays():

    function getDays(month, year) {
    // create array to hold number of days in each month
    var ar = new Array(12);
    ar[0] = 31; // January
    ar[1] = (leapYear(year)) ? 29 : 28; // February
    ar[2] = 31; // March
    ar[3] = 30; // April
    ar[4] = 31; // May
    ar[5] = 30; // June
    ar[6] = 31; // July
    ar[7] = 31; // August
    ar[8] = 30; // September
    ar[9] = 31; // October
    ar[10] = 30; // November
    ar[11] = 31; // December

    // return number of days in the specified month (parameter)
    return ar[month];
    }

      如果指定的年数可以被4整除,那么leapYear()函数将返回“true”,否则返回”false“:

    function leapYear(year) {
    if (year % 4 == 0) // basic rule
    return true; // is leap year
    /* else */ // else not needed when statement is "return"
    return false; // is not leap year
    }


      getMonthName()函数返回指定月份的名字:

    function getMonthName(month) {
    // create array to hold name of each month
    var ar = new Array(12);
    ar[0] = "January";
    ar[1] = "February";
    ar[2] = "March";
    ar[3] = "April";
    ar[4] = "May";
    ar[5] = "June";
    ar[6] = "July";
    ar[7] = "August";
    ar[8] = "September";
    ar[9] = "October";
    ar[10] = "November";
    ar[11] = "December";

    // return name of specified month (parameter)
    return ar[month];
    }

      setCal()函数是主模块,我们在脚本的第一行调用它。该函数为当天(now)、和每月的第一天(firstDayInstance)建立一个Date对象。用这些对象,setCal()函数解析出关于一个月的第一天、当日,和最后一天的所有信息。

    function setCal() {
    // standard time attributes
    var now = new Date();
    var year = now.getFullYear();
    var month = now.getMonth();
    var monthName = getMonthName(month);
    var date = now.getDate();
    now = null;

    // create instance of first day of month, and extract the day on which it occurs
    var firstDayInstance = new Date(year, month, 1);
    var firstDay = firstDayInstance.getDay();
    firstDayInstance = null;

    // number of days in current month
    var days = getDays(month, year);

    // call function to draw calendar
    drawCal(firstDay + 1, days, date, monthName, year);
    }

      ===编写日历二===

      ===编写日历二===

      drawCal()函数做实际的画图工作,它接受以下参数:
      *firstDay.当月的第一天在一星期中的第几天,该值从Date对象计数而来。例如:星期天是一星期的第一天,星期六是第二天等等。例如:如果当月的第一天是星期四,那么该参数是:5
      *lastDate.每月的天数,在五月等于31,在六月等于30
      *date.当天的日期,必须在1到lastDate之间
      *monthName.当月的名字
      *year.年

      函数的第一部分为以后的格式控制初始化一些变量:
    // constant table settings
    var border = 2; // 3D height of table's border
    var cellspacing = 4; // width of table's border
    var headerColor = "midnightblue"; // color of table's header
    var headerSize = "+3"; // size of tables header font
    var colWidth = 60; // width of columns in table
    var dayCellHeight = 25; // height of cells containing days of the week
    var dayColor = "darkblue"; // color of font representing week days
    var cellHeight = 40; // height of cells representing dates in the calendar
    var todayColor = "red"; // color specifying today's date in the calendar
    var timeColor = "purple"; // color of font representing current time

      现在我们初始化text变量并且在表格中建立一个头元素,包括当前月和当前年:
    // create basic table structure
    var text = ""; // initialize accumulative variable to empty string
    text += ' '; // table settings
    text += ' '; // close header cell

      我们保存表格单元的开始标示在openCol中,把结束标记放在closeCol中:
    // variables to hold constant settings
    var openCol = ' ';
    for (var dayNum = 0; dayNum < 7; ++dayNum) {
    text += openCol + weekDay[dayNum] + closeCol ;
    }
    text += '';


      我们通过一个双重循环打印当月的日期。外部循环重复产生日历的行,我们从第一行到第Math.ceil((lastDate + firstDay - 1) / 7)行。花点时间确信您的数学还好,比如:如果今天是星期四,firstday是5,要求的月份是六月,所以lastDate是30。行数是(5 + 30 -1)/7 即34/7即4到5之间,这种情况下Math.ceil()将得到5。内部循环重复遍历一星期的七天,以下是双重循环程序段:
    // declaration and initialization of two variables to help with tables
    var dayOfMonth = 1;
    var curCell = 1;

    for (var row = 1; row <= Math.ceil((lastDate + firstDay - 1) / 7); ++row) {
    text += ' ';
    for (var col = 1; col <= 7; ++col) {

      现在我们做个决定,首先:一些单元根本不属于该月,即当月第一天前的和当月最后一天后的,我们只是跳过这些单元:
    if ((curCell < firstDay) || (dayOfMonth > lastDate)) {
    text += '';
    curCell++;
    } else {

      这些单元将被格式为和我们指定给TAG标记的确省样式一致的格式。我们设置TD标志的样式如下:
    〈STYLE〉
    TD {
    background-color:tan;
    width:50;
    height:50;
    }
    〈/STYLE〉

      注意不属于该月的单元都是黄褐色的
      第二个决定是:我们怎么打印当天的日期,这里我们调用TODAY HTML组件的DAY自定义标记,将该月的日期传给它的value属性。

      if (dayOfMonth == date) { // current cell represents today's date
    text += ' ';
    } else {

      最后一个选择是打印该月中其他的所有天的日期。我们调用ANYDAY HTML组件的DAY自定义标记,象上面一样将该月的日期传它的value属性。
    text += ' ';
      最后我们要结束循环。在每个星期遍历结尾我们递增dayOfTheMonth,在每行的结束我们需要增加一个TR标记,在双重循环的结束我们需要结束表格,并且输出并打印text变量。
    }
    dayOfMonth++;
    }
    }
    text += '';
    }

    // close all basic table tags
    text += '
    '; // create table header cell
    text += ''; // set font for table header
    text += monthName + ' ' + year;
    text += ''; // close table header's font settings
    text += '
    ';
    openCol += '';
    var closeCol = '
    ';

      星期缩写存放在weekDay[] 数组中:
    // create array of abbreviated day names
    var weekDay = new Array(7);
    weekDay[0] = "Sun";
    weekDay[1] = "Mon";
    weekDay[2] = "Tues";
    weekDay[3] = "Wed";
    weekDay[4] = "Thu";
    weekDay[5] = "Fri";
    weekDay[6] = "Sat";

      我们将重复一星期中的七天并且将他们打印在日历的下一行:
    // create first row of table to set column width and specify week day
    text += '
    ';
    text += '
    ';

    // print accumulative HTML string
    document.write(text);
    }

    [1]

  • 上一篇:IE 5.0操作入门
    下一篇:HTML 组件(HTML COMPONENTS)之三