====日历主页面=== <BODY> <MYCAL:CALENDAR></MYCAL:CALENDAR> </BODY> ===CALENDAR HTC=== <PUBLIC:COMPONENT tagName=”CALENDAR”> <SCRIPT LANGUAGE=”JavaScript”> <STYLE> <BODY> // Copyright 1997 — Tomer Shiran setCal(); function leapYear(year) { function getDays(month, year) { // return number of days in the specified month (parameter) function getMonthName(month) { // return name of specified month (parameter) function setCal() { // create instance of first day of month, and extract the day on which it occurs // number of days in current month // call function to draw calendar function drawCal(firstDay, lastDate, date, monthName, year) { // create basic table structure // variables to hold constant settings // create array of abbreviated day names // create first row of table to set column width and specify week day // declaration and initialization of two variables to help with tables for (var row = 1; row <= Math.ceil((lastDate + firstDay – 1) / 7); ++row) { // close all basic table tags // print accumulative HTML string // –>
<P>Click a day in the calendar to add or modify your schedule.</P>
</HTML>
<ATTACH EVENT=”oncontentready” ONEVENT=”fnInit()”/>
</PUBLIC:COMPONENT>
<!–
function fnInit() {
defaults.viewLink = document;
}
// –>
</SCRIPT>
TD {
background-color:tan;
width:50;
height:50;
}
</STYLE>
</HEAD>
<SCRIPT LANGUAGE=”JavaScript”>
<!–
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
}
// 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 ar[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 ar[month];
}
// 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;
var firstDayInstance = new Date(year, month, 1);
var firstDay = firstDayInstance.getDay();
firstDayInstance = null;
var days = getDays(month, year);
drawCal(firstDay + 1, days, date, monthName, year);
}
// constant table settings
//var headerHeight = 50 // height of the tables header cell
var border = 2; // 3D height of tables border
var cellspacing = 4; // width of tables border
var headerColor = “midnightblue”; // color of tables 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 todays date in the calendar
var timeColor = “purple”; // color of font representing current time
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 headers font settings
text += </TH>; // close header cell
var openCol = <TD WIDTH= + colWidth + HEIGHT= + dayCellHeight + >;
openCol += <FONT COLOR=” + dayColor + “>;
var closeCol = </FONT></TD>;
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”;
text += <TR ALIGN=”center” VALIGN=”center”>;
for (var dayNum = 0; dayNum < 7; ++dayNum) {
text += openCol + weekDay[dayNum] + closeCol;
}
text += </TR>;
var dayOfMonth = 1;
var curCell = 1;
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 todays date
text += <TD><TODAY:DAY value= + dayOfMonth + ></TODAY:DAY></TD>;
} else {
text += <TD><ANYDAY:DAY value= + dayOfMonth + ></ANYDAY:DAY></TD>;
}
dayOfMonth++;
}
}
text += </TR>;
}
text += </TABLE>;
text += </CENTER>;
document.write(text);
}
</SCRIPT>
</BODY>
</HTML>
html组件(html components)之六_html教程
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com 特别注意:本站所有转载文章言论不代表本站观点! 本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。未经允许不得转载:IDC资讯中心 » html组件(html components)之六_html教程
相关推荐
-      设置CheckBox复选框只读属性
-      HTML5中div、article、section三者的区别
-      HTML 5 canvas 标签的定义与用法
-      html中的tabIndex属性来控制Tab键的顺序
-      使用html5的fillRect和setTransform画立方体
-      10个HTML4和HTML5的关键区别
-      html5 canvas 线太粗的解决方法
-      html5 canvas 画虚线的方法