<!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> |