用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></table>‘’;

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></table>‘’;

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></table>‘’;

if (i != 12) {
if (i % 3 == 0)
output += ‘’</td></tr><tr><td valign="top">‘’;
else
output += ‘’</td><td valign="top">‘’;
}
}

output += ‘’</td></tr></table>‘’;
}

document.write(output);
//--></script>

</center>

</body>

</html>

把这四个文件放在同一目录下。运行index.htm

原文转自：http://www.ltesting.net