HTML 组件（HTML COMPONENTS）七


答案：     ===CALENDAR HTC=== 
  <HTML XMLNS:MYCAL XMLNS:TODAY XMLNS:ANYDAY> 
  <HEAD> 
   <?IMPORT NAMESPACE="ANYDAY" IMPLEMENTATION="day.htc"/> 
   <?IMPORT NAMESPACE="TODAY" IMPLEMENTATION="today.htc"/> 
    
  <PUBLIC:COMPONENT tagName="CALENDAR"> 
   <ATTACH EVENT="oncontentready" ONEVENT="fnInit()"/> 
  </PUBLIC:COMPONENT> 
  
  <SCRIPT LANGUAGE="javascript"> 
  <!-- 
  function fnInit() { 
   defaults.viewLink = document; 
  } 
  // --> 
  </SCRIPT> 
  
  <STYLE> 
   TD { 
    background-color:tan; 
    width:50; 
    height:50; 
   } 
  </STYLE> 
  </HEAD> 
  
  <BODY> 
  <SCRIPT LANGUAGE="javascript"> 
  <!-- 
  
  // Copyright 1997 -- Tomer Shiran 
  
  setCal(); 
  
  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 
  } 
  
  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]; 
  } 
  
  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]; 
  } 
  
  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); 
  } 
  
  function drawCal(firstDay, lastDate, date, monthName, year) { 
   // constant table settings 
   //var headerHeight = 50 // height of the table's header cell 
   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 
  
   // 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 
  
   // variables to hold constant settings 
   var openCol = '<TD WIDTH=' + colWidth + ' HEIGHT=' + dayCellHeight + '>'; 
   openCol += '<FONT COLOR="' + dayColor + '">'; 
   var closeCol = '</FONT></TD>'; 
  
   // 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>'; 
  
   // 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 += '<TD></TD>'; 
      curCell++ 
     } else { 
       if (dayOfMonth == date) { // current cell represents today's date 
        text += '<TD><TODAY:DAY value=' + dayOfMonth + '></TODAY:DAY></TD>'; 
       } else { 
         text += '<TD><ANYDAY:DAY value=' + dayOfMonth + '></ANYDAY:DAY></TD>'; 
        } 
        dayOfMonth++; 
      } 
    } 
    text += '</TR>'; 
   } 
  
   // close all basic table tags 
   text += '</TABLE>'; 
   text += '</CENTER>'; 
  
   // print accumulative HTML string 
   document.write(text); 
  } 
  
  // --> <
上一个：HTML 组件（HTML COMPONENTS）八
下一个：HTML 组件（HTML COMPONENTS）六
更多图片编程知识: