在javascript中应用Object (3)


 八. 综合应用

  最后一个例子演示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对象的用途有一个正确的评价,也许还能为你在开发中使用它们提供几个有用的思路。

本文作者:
« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3