HTML组件(HTML COMPONENTS)之六
时间： 2021-07-31 作者：daque
====日历网页面===
<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; 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); } // --> </script> </body> </html>
相关推荐
推荐下载
热门阅览
最新排行
- 1 手机如何装windows系统，手机装windows系统教程
- 2 微信公众号重大调整 新公注册公众号将没有留言功能
- 3 烧杯app最剧烈的反应有哪些？ 烧杯app攻略
- 4 微信小程序怎么用 微信小程序使用教程
- 5 360快剪辑怎么使用？360快剪辑图文视频教程
- 6 八分音符外挂神器：绝望中的战斗机
- 7 2017热门微信小程序排行榜 微信小程序二维码大全
- 8 微信聊天记录导出到电脑 怎么在电脑上查看微信聊天记录
- 9 在U递上赚钱和省钱教程 教你在U递上怎么赚钱何省钱
- 10 u递邀请码申请教程 u递邀请码领取方法
- 11 如何解决爱奇艺账号登陆验证 跳过爱奇艺账号手机登录验证方法分享 亲测好用
- 12 手机申请无限制申请QQ靓号 手机怎样无限申请Q号