兼容FF,IE7.0,IE6.0,Safari,Opera的万年日历

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

字体大小: 小中大

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>A Calendar By milky</title>
  <meta name="Generator" content="EditPlus" />
  <meta name="Author" content="milk" />
  <style>
    /*--------------------------------*/
    /*--------------------------------日历的边距，填充，字体*/
    #calendar{
        position: absolute;
        z-index: 0;
        left: 250px;
        top: 200px;
        padding: 0
        margin: 0;
        font-family: verdana;
        font-size: 11pt;
    }
    /*--------------------------------div中li和ul的样式*/
    #calendar ul,#calendar ul li{
        padding: 0;
        margin: 0;
        list-style: none;
    }
    #calendar ul{
        display: block;
        float: left;
    }

    #calendar ul li{
        display: block;
        width: 50px;
        height: 25px;
        line-height: 25px;
        text-align: center;
        border: 1px #FFFFCC solid;
        float: left;
    }
    #header,#week1,#week2,#week3,#week4,#week5,#week6{
        clear: left;
    }
    /*--------------------------------设置星期的样式*/
    #header{
        background: #3399CC;
        font-weight: bold;
    }

    /*--------------------------------设置日历每行号数的样式*/
    #week1 li,#week2 li,#week3 li,#week4 li,#week5 li,#week6 li{
        color: #fff;
        background: #99CCFF;
    }
    #time{
        display: block;
        width: 363px;
        margin: 0;
        padding: 0;
        background: #CCCCFF;
        text-align: center;
    }
    #time span{
        padding: 0;
        font-weight: bold;
    }

    #yearPanel{
        margin-right: 5px;
    }

    /*--------------------------------设置日历背景样式*/
    /*--------若不需要背景可把background中的url删去*/
    #calendarBg{
        position: absolute;
        z-index: 1;
        width: 420px;
        height: 337px;
        left: 225px;
        top: 100px;
        background: transparent url(http://bbs.blueidea.com/attachment.php?aid=68410¬humb=yes) center center no-repeat;
    }
    /*--------------------------------设置按钮的样式*/
    #calendarBg a{
        text-decoration: none;
        color: #000099;
        font-weight: bold;
    }
    #calendarBg a:hover{
        font-weight: bold;
        color: #fff;
    }
    #calendarBg span{
        position: relative;
        top: 100px;
        left: 73px;
    }
    #right{
        margin-left: 152px;
    }
  </style>
  <script>
    ///////////////////////为Date类定义一个方法来获得一个月的总天数

    ///////////////////////调用getSumDate可以获得一个月的总天数
    Date.prototype.getSumDate = function()
    {
        //js中没有clone方法，所以必须自己定义一个函数来实现
        var copyDate = new Date();
        //把当前月份的信息拷贝给copyDate
        copyDate.setTime(this.getTime());
        //把copyDate的号数设为其当前月份的第一天
        copyDate.setDate(1);
        var firstDay = copyDate.getTime();
        //把copyDate的号数设为当前月份的最后一天
        copyDate.setMonth(copyDate.getMonth() + 1)
        var lastDay = copyDate.getTime();
        //计算当前月份的总天数
        var sumDay = (lastDay - firstDay) / (60 * 60 * 24 * 1000);
        return sumDay;
    }
    var curDate;
    var today;
    var year;
    var month;
    var maxDate;
    ///////////////////////初始化日历的函数
    function initDate()
    {
        curDate = new Date();
        today = curDate.getDate();
        showDate();
    }
   ////////////////////////把日期显示到li中的函数，在选择月份，年份的时候也调用此函数
    function showDate(callStr)
    {
        if(callStr == "yearBack")
            //把年份设置为上一年
            curDate.setFullYear(year - 1);
        else if(callStr == "yearForward")
            //把年份设置为下一年
            curDate.setFullYear(year + 1);
        else if(callStr == "monthBack")
        //把月份设置为上一月
        {
            curDate.setMonth(month - 1);
            //当月份为的一个月的时候，重置当前年份
            if(month == 11)
                curDate.setFullYear(year);
        }
        else if(callStr == "monthForward")
        //把月份设置为下一月
        {
            curDate.setMonth(month + 1);
            //当月份为的最后一个月的时候，重置当前年份
            if(month == 11)
                curDate.setFullYear(year + 1);
        }
     year = curDate.getFullYear();
     month = curDate.getMonth();
     maxDate = curDate.getSumDate();
     //把天数设置为当前月份的第一天
     curDate.setDate(1);
     //获得第一天所对应的星期
     var dayIndex = curDate.getDay();
     if(!dayIndex)
         dayIndex = 7;
     var weekday = dayIndex;
     //显示月份、年份
     document.getElementById("yearPanel").innerHTML = year + "年";
     document.getElementById("monthPanel").innerHTML = (month + 1) + "月";
     //重置各li的内容，清空
     for(var i = 1; i <= 42; i++)
        {
            document.getElementById("day_" + i).innerHTML = " ";
            document.getElementById("day_" + i).style.backgroundImage = "none";
            document.getElementById("day_" + i).style.fontWeight = "normal";
        }
     //在li中显示每天的号数
     do
     {
        //获得当前号数
        var day = curDate.getDate();
        document.getElementById("day_" + dayIndex).innerHTML = day;
        //标记当前号数
        if(day == today)
        {
             document.getElementById("day_" + dayIndex).style.backgroundImage = "url(http://bbs.blueidea.com/attachment.php?aid=68411¬humb=yes)";
             document.getElementById("day_" + dayIndex).style.backgroundPosition = "center center";
             document.getElementById("day_" + dayIndex).style.backgroundRepeat = "no-repeat";
             document.getElementById("day_" + dayIndex).style.fontWeight = "bold";
        }
        else if(maxDate < today)
        {
            document.getElementById("day_" + (maxDate + weekday - 1)).style.backgroundImage = "url(http://bbs.blueidea.com/attachment.php?aid=68411¬humb=yes)";
            document.getElementById("day_" + dayIndex).style.backgroundPosition = "center center";
            document.getElementById("day_" + dayIndex).style.backgroundRepeat = "no-repeat";
            document.getElementById("day_" + (maxDate + weekday - 1)).style.fontWeight = "bold";
        }
        else
        {
            document.getElementById("day_" + dayIndex).style.backgroundImage = "none";
            document.getElementById("day_" + dayIndex).style.fontWeight = "normal";
        }
      //把号数设置为后一天
      curDate.setDate(day + 1);
      dayIndex ++;
     }
     //若没到下一个月，则循环
     while (curDate.getMonth() == month);
     //把月份设置为当前月份
     curDate.setMonth(month);
    }
  </script>

</head>
<body onLoad="initDate()">
    <div id="calendar">
        <div id="time">
            <span id="yearPanel">xxxx年</span>
            <span id="monthPanel">xx月</span>
        </div>
        <ul id="header">
            <li id="mon">星期一</li>
            <li id="tue">星期二</li>
            <li id="wed">星期三</li>
            <li id="thu">星期四</li>
            <li id="fri">星期五</li>
            <li id="sat">星期六</li>
            <li id="sun">星期天</li>
        </ul>
        <ul id="week1">
            <li id="day_1">1</li>
            <li id="day_2">2</li>
            <li id="day_3">3</li>
            <li id="day_4">4</li>
            <li id="day_5">5</li>
            <li id="day_6">6</li>
            <li id="day_7">7</li>
        </ul>
        <ul id="week2">
            <li id="day_8">8</li>
            <li id="day_9">9</li>
            <li id="day_10">10</li>
            <li id="day_11">11</li>
            <li id="day_12">12</li>
            <li id="day_13">13</li>
            <li id="day_14">14</li>
        </ul>
        <ul id="week3">
            <li id="day_15">15</li>
            <li id="day_16">16</li>
            <li id="day_17">17</li>
            <li id="day_18">18</li>
            <li id="day_19">19</li>
            <li id="day_20">20</li>
            <li id="day_21">21</li>
        </ul>
        <ul id="week4">
            <li id="day_22">22</li>
            <li id="day_23">23</li>
            <li id="day_24">24</li>
            <li id="day_25">25</li>
            <li id="day_26">26</li>
            <li id="day_27">27</li>
            <li id="day_28">28</li>
        </ul>
        <ul id="week5">
            <li id="day_29">29</li>
            <li id="day_30">30</li>
            <li id="day_31">31</li>
            <li id="day_32">32</li>
            <li id="day_33">33</li>
            <li id="day_34">34</li>
            <li id="day_35">35</li>
        </ul>
        <ul id="week6">
            <li id="day_36">36</li>
            <li id="day_37">37</li>
            <li id="day_38">38</li>
            <li id="day_39">39</li>
            <li id="day_40">40</li>
            <li id="day_41">41</li>
            <li id="day_42">42</li>
        </ul>
    </div>
    <div id="calendarBg">
        <span>
            <a href="#" onClick="showDate('yearBack');this.blur();"><<<</a>
            <a href="#" onClick="showDate('monthBack');this.blur();"><<</a>
        </span>
        <span id="right">
            <a href="#" onClick="showDate('monthForward');this.blur();">>></a>
            <a href="#" onClick="showDate('yearForward');this.blur();">>>></a>
        </span>
    </div>
</body>
</html>

'引用自http://www.52515.net:8088/file.asp?fileid=323032372672713d323030372d31312d313926626f61726469643d3431