HTML组件(HTML COMPONENTS)之六
时间：2007-02-17 来源：PHP爱好者
====日历主页面===
<head> <title>Calendar Example</title> <?IMPORT NAMESPACE="MYCAL" IMPLEMENTATION="calendar.htc"/> </HEAD> <BODY> <P>Click a day in the calendar to add or modify your schedule.</P> <MYCAL:CALENDAR></MYCAL:CALENDAR> </BODY> </HTML>
===CALENDAR HTC===
<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; } </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); } // --> </SCRIPT> </BODY> </HTML>
php爱好者站 http://www.phpfans.net PHP|MySQL|javascript|ajax|html.
相关阅读 更多 +
