javascript

一页面日历

作者:admin 日期:2008-11-02

字体大小: 小 中 大
<!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>

<body>
<script language="JavaScript">
<!--
cal = new Calendar('cal');
//-->
</script>


文章来自: 本站原创
引用通告地址: http://www.is21.cn/trackback.asp?tbID=466
Tags:
评论: 0 | 引用: 0 | 查看次数: 1250
发表评论
你没有权限发表留言！