|
八. 综合应用
最后一个例子演示JavaScript对象的重要性。首先设置好一个 Calendar(日历)对象，然后根据需要显示任何一个月的月历。执行过程不复杂，只需要指定月和年为对象属性，然后让构造器做其它事情即可：
＜script language="JavaScript"＞
/* Calendar object, calendar.js
Usage:
obj = new Calendar(mm, yyyy);
created 15.Mar.2001
copyright Melonfire, 2001. all rights reserved.
http://www.melonfire.com/community/columns/trog/
demonstration only - not meant for production enviroments!!
*/
// constructor
function Calendar(month, year)
{
// array of day names
this.days = new Array("Sunday", "Monday", "Tuesday", "Wednesday",
"Thursday", "Friday", "Saturday");
// array of month names
this.months = new Array("January", "February", "March", "April", "May",
"June", "July", "August", "September", "October", "November", "December");
// array of total days in each month
this.totalDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
// object properties - month and year
// correction for zero-based array index
this.month = month-1;
this.year = year;
// leap year correction
if (this.year % 4 == 0)
{
this.totalDays[1] = 29;
}
// temporary variable - used later
this.rowCount = 0;
// object method
this.display = display;
// automatically run method display() once object is initialized
this.display();
}
// function to display calendar
function display()
{
// create a Date object
// required to obtain basic date information
// get the first and last day of the month - boundary values for calendar
obj = new Date(this.year, this.month, 1);
this.firstDayOfMonth = obj.getDay();
obj.setDate(31);
this.lastDayOfMonth = obj.getDay();
// start table
document.write("＜table border=0 cellpadding=2 cellspacing=5＞");
// month display
document.write("＜tr＞＜td colspan=7 align=center＞＜font face=Arial
size=-1＞＜b＞" + this.months[this.month] + " " + this.year +
"＜/b＞＜/font＞＜/td＞＜/tr＞");
// day names
document.write("＜tr＞");
for (x=0; x＜7; x++)
{
document.write("＜td＞＜font face=Arial size=-2＞" +
this.days[x].substring(0,3) + "＜/font＞＜/td＞") ;
}
document.write("＜/tr＞");
// start displaying dates
// display blank spaces until the first day of the month
document.write("＜tr＞");
for (x=1; x＜=this.firstDayOfMonth; x++)
{
// this comes in handy to find the end of each 7-day block
this.rowCount++;
document.write("＜td＞＜font face=Arial size=-2＞ ＜/font＞＜/td＞");
}
// counter to track the current date
this.dayCount=1;
while (this.dayCount ＜= this.totalDays[this.month])
{
// use this to find out when the 7-day block is complete and display a new row
if (this.rowCount % 7 == 0)
{
document.write("＜/tr＞\n＜tr＞");
}
// print date
document.write("＜td align=center＞＜font face=Arial size=-1＞" + this.dayCount
+ "＜/font＞＜/td＞");
this.dayCount++;
this.rowCount++;
}
// end table
document.write("＜/tr＞＜/table＞");
}
// eof
＜/script＞
以下解释一下上面代码的工作过程：
最开始的几行设置了包含月和日名的数组以及每个月中总的天数。用一个简单的方程式来判断某年是否为闰年，如果是的话就对二月的总天数进行相应修改。然后控制就传给了对象方法display()，它负责将日历写到页面上。
使用了Date对象和一些临时变量之后，就创建了一个表格并用这个月的日期来填充好。document.write()方法负责设置 ＜table＞、＜tr＞ 和 ＜td＞ 标记，然后将日期信息打印到表格单元中。
以下代码说明如何使用这个对象：
＜html＞
＜head＞
＜script language="JavaScript" src="calendar.js"＞＜/script＞
＜/head＞
＜body bgcolor="white"＞
＜script＞ obj1 = new Calendar(2, 2005); ＜/script＞
＜script＞ obj2 = new Calendar(7, 2001); ＜/script＞
＜/body＞
＜/html＞
代码运行。
这就是全部了。我希望本文中的例子能让你对 JavaScript对象的用途有一个正确的评价，也许还能为你在开发中使用它们提供几个有用的思路。
|
