<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JavaScript 日历</title>
<script language="JavaScript">
<!--
function Calendar(name){
document.write('<div id="calendar"></div>');
this.name = name;
this.now = new Date();
this.year = this.now.getFullYear();
this.month = this.now.getMonth();
this.day = this.now.getDate();
this.monthName = new Array('January','February','March','April','May','June','July','August','September','October','November','December');
this.weekName = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
this.daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31,30, 31, 30, 31);
this.element = document.getElementById('calendar');
this.init();
}
Calendar.prototype.init = function() {
var strHtml = '';
strHtml += this.createHead();
strHtml += this.createWeek();
strHtml += this.createDays();
strHtml += this.createFoot();
this.element.innerHTML = strHtml;
}
Calendar.prototype.getDays = function() {
if (1 == this.month) return ((0 == this.year % 4) && (0 != (this.year % 100))) ||(0 == this.year % 400) ? 29 : 28;
else return this.daysInMonth[this.month];
}
Calendar.prototype.createHead = function() {
return '<span class="head">' + this.monthName[this.month] + ' ' + this.year + '</span>';
}
Calendar.prototype.createWeek = function() {
var strResult = '';
for (var i = 0; i < 7; i++) {
if (i == 0 || i == 6) strResult += '<span class="we">';
else strResult += '<span class="ww">';
strResult += this.weekName[i].substr(0,2) + '</span>';
}
return strResult;
}
Calendar.prototype.createDays = function() {
var strResult = '';
var i = 0;
var d = this.getDays();
var n = Math.ceil(d / 7) * 7;
var w = new Date(this.year, this.month, 1).getDay();
for (var j = 0; j < w; j++) { //输出前空格
i += 1;
strResult += '<span> </span>';
}
for (var j = 1; j <= d; j++) { //输出日期格
i += 1;
if (j == this.day) {
strResult += '<span class="today">' + j + '</span>';
} else {
var k = new Date(this.year, this.month, j).getDay();
if (k == 0 || k == 6) {
strResult += '<span class="weekend">' + j + '</span>';
} else {
strResult += '<span>' + j + '</span>';
}
}
}
for (var j = 0; j < (Math.ceil(i / 7) * 7 - i); j++) { //输出后空格
strResult += '<span> </span>';
}
return strResult;
}
Calendar.prototype.createFoot = function() {
return '<span class="foot"><a href="javascript:' + this.name + '.changeMonth(\'p\');" class="arrow">3</a> MONTH <a href="javascript:' + this.name + '.changeMonth(\'n\');" class="arrow">4</a> <a href="javascript:' + this.name + '.changeYear(\'p\');" class="arrow">3</a> YEAR <a href="javascript:' + this.name + '.changeYear(\'n\');" class="arrow">4</a></span>';
}
Calendar.prototype.changeYear = function(arg) {
if (arg == 'p') this.year -= 1;
if (arg == 'n') this.year += 1;
this.init();
}
Calendar.prototype.changeMonth = function(arg) {
var m;
if (arg == 'p') m = this.month - 1;
if (arg == 'n') m = this.month + 1;
if (arg == 'p' || arg == 'n') {
if ( m > -1 && m < 12) {
this.month = m;
} else if (m < 0) {
this.year -= 1;
this.month = 11;
} else if (m > 11) {
this.year += 1;
this.month = 0;
}
}
this.init();
}
//-->
</script>
<style type="text/css">
#calendar {
width: 175px;
border: 1px solid #cccccc;
border-bottom: none;
border-left: none;
}
#calendar span {
width: 24px;
color: #999999;
font-size: 9px;
font-family: Verdana, sans-serif;
font-weight: normal;
text-align: center;
background-color: #FFFFFF;
border-bottom: 1px solid #cccccc;
border-left: 1px solid #cccccc;
padding: 2px 0px 1px 0px;
margin: 0px;
float: left;
}
#calendar span.today {
color: #0066ff;
font-weight: bold;
background-color: #f6f6f6;
}
#calendar span.head {
width: 164px;
color: #FFFFFF;
text-align: left;
font-weight: bold;
font-family: Tahoma, sans-serif;
background-color: #0033CC;
border-bottom: none;
padding: 2px 5px 1px 5px;
}
#calendar span.foot {
width: 174px;
color: #999999;
text-align: center;
font-weight: bold;
font-family: Tahoma, sans-serif;
background-color: #F0F0F0;
padding: 0px;
}
#calendar a.arrow {
color: #666666;
font-family: webdings;
font-weight: normal;
text-decoration: none;
}
#calendar a:hover.arrow {
color: #0000FF;
}
#calendar .ww, #calendar .we {
color: #666666;
font-weight: bold;
font-family: Tahoma, sans-serif;
background-color: #F0F0F0;
}
#calendar span.weekend, #calendar .we {
color: #FF0000;
}
</style>
</head> <body>
<script language="JavaScript">
<!--
cal = new Calendar('cal');
//-->
</script>
</body>
</html> |
