用JAVASCRIPT实现的日历

calendar.css:.cal { background-color: #ffffff;}.head { color: #bb0000; font-family: arial; font-weight: bold; text-align: left;}.days { color: #0000bb; font-family: arial; font-weight: bold; text-align: right;}.grey { color: #ffffff; font-family: arial; font-size: small; text-align: right;}.links { color: #ff0000; font-family: arial; font-size: small; text-align: right;}.today { color: #ffffff; background-color: #ff0000; font-family: arial; font-size: small; text-align: right;}calendar.js: 'january','february','march', 'april','may','june','july', 'august','september','october', 'november','december');var daysofmonth = new array( 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);var daysofmonthly = new array( 31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);var dow = new array('sun','mon','tue','wed','thu','fri','sat', 'sun','mon','tue','wed','thu','fri');var size = 'width="50" height="30"';var border = 'border="1"';function isleapyear(num) { if (((num % 4 == 0) && (num % 100 != 0)) || (num % 400 == 0)) return true; return false;}function calendarselect(month,year, offset) { if (offset == null) offset = 0; if (window.changemonth) { } else { alert('a changemonth() function has not been defined'); return ''; } if (window.changeyear) { } else { alert('a changeyear() function has not been defined'); return ''; } if (window.changeday) { } else { alert('a changeday() function has not been defined'); return ''; } var output = ''; output += '<form name="cal">'; output += calendarhead(month,year,true); output += calendarmonth(month,year,offset); output += '</form>'; return output;}function calendarhead(month,year,select) { var output = ''; output += '<table cellspacing="0" class="cal">' + '<tr><td align="left" width="100%" class="head">' + moy[month-1] + ' ' + year + '</td>'; if (select) { output += '<td width="50%" align="right">' + '<select name="month" onchange="calmonth()">'; for (var month=1; month<=12; month++) { output += '<option value="' + month + '"'; if (month == month) output += ' selected'; output += '>' + moy[month-1] + '</option>'; } output += '</select>' + '<select name="year" onchange="calyear();">'; for (var year=1900; year<=2100; year++) { output += '<option value="' + year + '"'; if (year == year) output += ' selected'; output += '>' + year + '</option>'; } output += '</select>'; } output += '</td></tr>'; return output;}function calendarmonth(m,y,offset) { m--; if (offset == null) offset = 0; firstday = new date(y,m,1); startday = firstday.getday(); if (startday < offset) startday += 7; var days = daysofmonth; if (isleapyear(y)) days = daysofmonthly; var output = ''; output += '<table ' + border + ' cellpadding="0" class="cal"><tr>'; for (var i=0; i<7; i++) output += '<td ' + size + ' class="days">' + dow[i + offset] + '</td>'; output += '</tr><tr>'; var column = 0; var lastm = m - 1; if (lastm == -1) lastm = 11; for (var i=0+offset; i<startday; i++, column++) output += '<td ' + size + ' class="grey">' + (days[lastm]-startday+i+1) + '</td>'; for (var i=1; i<=days[m]; i++, column++) { var style = ' class="links"'; if (day == i && month == m+1 && year == y) style = ' class="today"'; if (window.changeday) output += '<td ' + size + '>' + '<a href="javascript:calday('+i+','+(m+1)+','+y+')"' + style + '>' + i + '</a></td>'; else output += '<td ' + size + style + '>' + i + '</td>'; if (column == 6) { output += '</tr><tr>'; column = -1; } } if (column > 0) { for (var i=1; column<7; i++, column++) output += '<td ' + size + ' class="grey">' + i + '</td>'; } output += '</tr>'; return output;}function getanoptionvalue(what) { return what.options[what.options.selectedindex].value;}function calmonth() { calendarmonth = getanoptionvalue(document.cal.month) - 0; changemonth(calendarmonth);}function calyear() { calendaryear = getanoptionvalue(document.cal.year) - 0; changeyear(calendaryear);}function calday(day,month,year) { calendarday = day; calendarmonth = month; calendaryear = year; changeday(calendarday,calendarmonth,calendaryear); }var calendarmonth;var calendaryear;var calendarday;current.js:function getfullyear() { var year = this.getyear(); if (year < 1000) year += 1900; return year;}if (!date.getfullyear) date.prototype.getfullyear = getfullyear;function getmilliseconds() { var date = new date( this.getfullyear(), this.getmonth(), this.getdate(), this.gethours(), this.getminutes(), this.getseconds(), 0 ); return this.gettime() - date.gettime();}if (!date.getmilliseconds) date.prototype.getmilliseconds = getmilliseconds;var daysofweek = new array( 'sunday','monday','tuesday','wednesday', 'thursday','friday','saturday');var monthsofyear = new array( 'january','february','march','april','may','june', 'july','august','september','october','november','december');function y2k(number) { number = number - 0; return (number < 1000) ? number + 1900 : number;}function dayofweek(day,month,year) { var a = math.floor((14 - month)/12); var y = year - a; var m = month + 12*a - 2; var d = (day + y + math.floor(y/4) - math.floor(y/100) + math.floor(y/400) + math.floor((31*m)/12)) % 7; return d;}function nths(day) { if (day == 1 || day == 21 || day == 31) return 'st'; if (day == 2 || day == 22) return 'nd'; if (day == 3 || day == 23) return 'rd'; return 'th';}function formatfulldate(day,month,year) { var dow = dayofweek(day,month,year); return daysofweek[dow] + ' ' + day + nths(day) + ' ' + monthsofyear[month-1] +' '+ year;}function padout(num) { return (num < 10) ? '0' + num : num;}function formatshortdate(day,month,year) { return padout(day) + '/' + padout(month) + '/' + year;}function formatshortdateus(day,month,year) { return padout(month) + '/' + padout(day) + '/' + year;}index.htm:<html><head><title>calendar</title><link rel="stylesheet" href="calendar.css" type="text/css"><script language="javascript" src="current.js"></script><script language="javascript" src="calendar.js"></script></head><body bgcolor="#ffffff"><center><script language="javascript"><!--size = '';border = 'border="0"';dow = new array('s','m','t','w','t','f','s', 's','m','t','w','t','f');moy = new array( 'jan','feb','mar','apr','may','jun', 'jul','aug','sep','oct','nov','dec');function changeday(day, month, year) { alert(new date(year, month, day));}var output = '';if (window.formatfulldate && window.calendarselect) { var today = new date(); var day = today.getdate(); var month = today.getmonth() + 1; var year = today.getfullyear(); output += '<table class="cal" border="1"><tr><td valign="top">'; for (var i = 1; i <= 12; i++) { output += '<table><tr><td>' + calendarhead(i,year) + calendarmonth(i,year,1) + '</td></tr>'; if (i != 12) { if (i % 3 == 0) output += '</td></tr><tr><td valign="top">'; else output += '</td><td valign="top">'; } } output += '</td></tr>';}document.write(output);//--></script></center></body></html>把这四个文献放在同一目次下。运转index.htm