Tip: you can modify some code before running
<p><meta content="text/html;charset=gb2312" http-equiv="content-type" /></p><!--把下面代码加到<head>与</head>之间--><p><style type="text/css">. Calendar {font-family: Verdana; font-size: 12px; background-color: # e0ecf9; text-align: center; width: 200px; height: 160px; padding: 10px; line-height: 1.5em ;}. calendar a {color: #1e5494 ;}. calendar table {width: 100%; border: 0 ;}. calendar table thead {color: # acacac ;}. calendar table td {font-size: 11px; padding: 1px ;}# idCalendarPre {cursor: pointer; float: left; padding-right: 5px ;}# idCalendarNext {cursor: pointer; float: right; padding-right: 5px;} # idCalendar td. onToday {font-weight: bold; color: # 60;}# idCalendar td. onSelect {font-weight: bold ;}</style></p><script type="text/javascript">Var $ = function (id) {return "string" = typeof id? Document. getElementById (id): id ;}; var Class ={ create: function () {return function () {this. initialize. apply (this, arguments) ;}} Object. extend = function (destination, source) {for (var property in source) {destination [property] = source [property];} return destination;} var Calendar = Class. create (); Calendar. prototype = {initialize: function (container, options) {this. container = $ (c Ontainer); // container (table structure) this. days = []; // date object list this. setOptions (options); this. year = this. options. year; this. month = this. options. month; this. selectDay = this. options. selectDay? New Date (this. options. selectDay): null; this. onSelectDay = this. options. onSelectDay; this. onToday = this. options. onToday; this. onFinish = this. options. onFinish; this. draw () ;}, // set the default property SetOptions: function (options) {this. options = {// Default value: Year: new Date (). getFullYear (), // year Month: new Date (). getMonth () + 1, // Display month SelectDay: null, // select the date onSelectDay: function () {}, // trigger onToday: function () {} on the selected date (){}, // trigger onFinish on the current day: function () {}// triggered after the calendar is painted}; Object. extend (this. options, options | {}) ;}, // Previous month PreMonth: function () {// Obtain the Date object var d = new Date (this. year, this. month-2, 1); // Set the attribute this. year = d. getFullYear (); this. month = d. getMonth () + 1; // re-draw the calendar this. draw () ;}, // NextMonth of the next month: function () {var d = new Date (this. year, this. month, 1); this. year = d. getFullYear (); this. month = d. getMonth () + 1; this. draw () ;}, // Draw a calendar Draw: function () {// used to save the date list var arr = []; // use the Date value of the first day of the month in the week as the number of days from the first day of the month for (var I = 1, firstDay = new Date (this. year, this. month-1, 1 ). getDay (); I <= firstDay; I ++) {arr. push ("") ;}// use the Date value of the last day of the month in the month as the number of days of the month for (var I = 1, monthDay = new Date (this. year, this. month, 0 ). getDate (); I <= monthDay; I ++) {arr. push (I);} var frag = document. createDocumentFragment (); this. days = []; while (arr. length> 0) {// Insert a tr var row = document every week. createElement ("tr"); // each week has 7 days for (var I = 1; I <= 7; I ++) {var cell = document. createElement ("td"); cell. innerHTML = ""; if (arr. length> 0) {var d = arr. shift (); cell. innerHTML = d; if (d> 0) {this. days [d] = cell; // determines whether today if (this. isSame (new Date (this. year, this. month-1, d), new Date () {this. onToday (cell);} // determines whether to select the date if (this. selectDay & this. isSame (new Date (this. year, this. month-1, d), this. selectDay) {this. onSelectDay (cell) ;}} row. appendChild (cell);} frag. appendChild (row);} // clear the content before inserting it (the table of ie cannot use innerHTML) while (this. container. hasChildNodes () {this. container. removeChild (this. container. firstChild);} this. container. appendChild (frag); this. onFinish () ;}, // Determine whether IsSame: function (d1, d2) {return (d1.getFullYear () = d2.getFullYear () & d1.getMonth () ==d2.getmonth () & d1.getDate () = d2.getDate ());}};</script><!--把下面代码加到<body>与</body>之间--><div class="Calendar"><div id="idCalendarPre"><</div><div id="idCalendarNext">></div>August 2008<table cellspacing="0"> <thead> <tr> <td>Day</td> <td>I</td> <td>II</td> <td>3.</td> <td>Thu</td> <td>V.</td> <td>Sat.</td> </tr> </thead> <tbody id="idCalendar"> </tbody></table></div><script language="JavaScript">Var cale = new Calendar ("idCalendar", {SelectDay: new Date (). setDate (10), onSelectDay: function (o) {o. className = "onSelect" ;}, onToday: function (o) {o. className = "onToday" ;}, onFinish: function () {$ ("idCalendarYear "). innerHTML = this. year; $ ("idCalendarMonth "). innerHTML = this. month; var flag = [10, 15, 20]; for (var I = 0, len = flag. length; I <len; I ++) {this. days [flag [I]. innerHTML = "" + flag [I] + "" ;}}); $ ("idCalendarPre "). onclick = function () {cale. preMonth () ;}$ ("idCalendarNext "). onclick = function () {cale. nextMonth ();}</script><p>Www.111cn.net China WEB first stop</p>
Tip: you can modify some code before running
