网乐原科技

直播中

news center新闻中心
首页 > 资讯中心 > 软件技术

HTML 组件(HTML COMPONENTS)四

发布时间:2008-08-10     阅读数: 次       来源:网乐原科技
===编写日历二===
  
  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 BORDER=' + border + ' CELLSPACING=' + cellspacing + '>'; // table settings
  text += '<TH COLSPAN=7 HEIGHT=' + 10 + '>'; // create table header cell
  text += '<FONT COLOR="' + headerColor + '" SIZE=' + headerSize + '>'; // set font for table header
  text += monthName + ' ' + year;
  text += '</FONT>'; // close table header's font settings
  text += '</TH>'; // close header cell
  我们保存表格单元的开始标示在openCol中,把结束标记放在closeCol中:
  // variables to hold constant settings
   var openCol = '<TD WIDTH=' + colWidth + ' HEIGHT=' + dayCellHeight + '>';
   openCol += '<FONT COLOR="' + dayColor + '">';
   var closeCol = '</FONT><TD>';
   星期缩写存放在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 += '<TR ALIGN="center" VALIGN="center">';
   for (var dayNum = 0; dayNum < 7; ++dayNum) {
   text += openCol + weekDay[dayNum] + closeCol ;
   }
   text += '</TR>';
   我们通过一个双重循环打印当月的日期。外部循环重复产生日历的行,我们从第一行到第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 += '<TR ALIGN="right" VALIGN="top">';
   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 += '<TD><TODAY:DAY value=' + dayOfMonth + '></TODAY:DAY></TD>';
  } else {
  最后一个选择是打印该月中其他的所有天的日期。我们调用ANYDAY HTML组件的DAY自定义标记,象上面一样将该月的
  日期传它的value属性。
  text += '<TD><ANYDAY:DAY value=' + dayOfMonth + '></ANYDAY:DAY></TD>';
  最后我们要结束循环。在每个星期遍历结尾我们递增dayOfTheMonth,在每行的结束我们需要增加一个TR标记,在双重
  循环的结束我们需要结束表格,并且输出并打印text变量。
   }
   dayOfMonth++;
   }
  }
  text += '</TR>';
  }
  
  // close all basic table tags
  text += '</TABLE>';
  text += '</CENTER>';
  
  // print accumulative HTML string
  document.write(text);
  }

网乐原科技

客服热线:0771-5761507

QQ:53290011

QQ邮箱:53290011@qq.com

工作时间:周一到周五 9:00-18:00

地址:广西南宁市江南万达写字楼C16栋1309室

物联网开发

关注我们

微信小商店 腾讯QQ客服 微信客服