当前页面: 开发资料首页 → Javascript 专题 → 用JavaScript实现的日历
摘要: 用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 + ";
output += > + moy[month-1] + </option>;
}
output += </select> +
<select name="Year" onChange="CalYear();">;
for (var year=1900; year<=2100; year++) {
output += <option value=" + year + ";
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
(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 + > +
style + > + i + </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:
<head>
<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">
<script language="JavaScript">
↑返回目录
前一篇: “JavaScript做的日历”改进版
后一篇: JavaScript正则表达式测试网页