WTNzone

编了个Javascript日历

shinichi_wtnJavascript

为了在博客系统中增加日历功能,自己用Javascript编写了个日历,效果还不错,后期将用日历对数据库进行异步读取,获得相应时间发表的文章情况,和百度空间的日历类似:)效果图如下

//相应的Javascript 代码如下(其中求得星期数采用了蔡勒（Zeller）公式)

<script type="text/javascript">
　    function initDate(year,month)
　　    {
            year.innerHTML="";
            month.innerHTML="";
　　        MonDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
　　        var y = new Date().getFullYear();
　　        var m = new Date().getMonth()+1; 
　　        var d = new Date().getDate();　　    
    　　    var cdate = new Date().toLocaleDateString();
    　　    document.getElementById("cdate").innerHTML="今天是"+cdate;
　　        for (var i = 2008; i < (y+10);i++)
            {
　　            year.options.add(new Option(i,i));
            }
            year.value=y;

　　        for (var i = 1; i <= 12; i++)
            {
                month.options.add(new Option(i,i));
            }
            month.value = m;        
            var n = MonDays[m-1];
            if (m == 2 && isLeapYear(year.options[year.selectedIndex].value))
                  n++;
            var day = xq(y,m);
            createDay(n,day,y,m);
　　    }
　　    
　　   function createDay(n,day,year,month){
　　        for(var i=1;i<=42;i++)
　　          {
　　           document.getElementById("c"+i).innerHTML="";
　　           document.getElementById("c"+i).style.color="#333333";
　　          }
　　        var s;
　　        for(var i=1;i<=n;i++)
　　        {
　　             s=i+day-1;
　　             document.getElementById("c"+s).innerHTML=i;
　　        }
　　        var d = new Date().getDate();
　　        var y = new Date().getFullYear();
　　        var m = new Date().getMonth()+1;　
　　        if(year==y && month==m){
　　             s=day+d-1;
　　             document.getElementById("c"+s).style.color="#ffffff";
　　             }
　　   }
　　    
　　   function change(year,month)
　　    {
　　         var y = year.options[year.selectedIndex].value;
    　　     var m = month.options[month.selectedIndex].value;
    　　     var n = MonDays[m - 1];
    　　     if ( m == 2 && isLeapYear(y))
    　　     {
    　　         n++;
    　　     }
    　　     var day = xq(y,m);
    　　     createDay(n,day,y,m);
　　    }
　　    
　　    function xq(year,month){
　　    if(month == 1 || month == 2)
　　      {
　　        year=parseInt(year)-1;
　　        month=parseInt(month)+12;
　　      }
　　    var xingqi=Math.floor(21/4)-2*21+parseInt(year)+Math.floor(year/4)+Math.floor(13*(parseInt(month)+1)/5);//星期算法
　　    xingqi = xingqi % 7+1;
　　    xingqi = (xingqi>0) ? xingqi:xingqi+7;
　　       return xingqi;
　　    }
　　    
　　    
　　    function isLeapYear(year)
　　    { 
　　        return( year%4==0 || (year%100 ==0 && year%400 == 0));
　　    }

　　    function previousmonth(year,month)
　　    {
　　         var y = year.options[year.selectedIndex].value;
　　         var m = month.options[month.selectedIndex].value;
　　         if(m!=1 || y!=2008){
　　         if(m>1)
　　           {m--;}
　　         else
　　           {m=12;y--;}
　　         var n = MonDays[m - 1];
    　　     if ( m == 2 && isLeapYear(y))
    　　     {
    　　         n++;
    　　     }
    　　     year.value=y;
    　　     month.value=m;
    　　     createDay(n,xq(y,m),y,m);}
    　　     else{
　　            alert("日历终点,请往后移动");
　　         }
　　    }
　　    
　　    function nextmonth(year,month)
　　    {
　　    　　 var y = year.options[year.selectedIndex].value;
　　         var m = month.options[month.selectedIndex].value;
　　         if(m<12)
　　           {m++;}
　　         else
　　           {m=1;y++;}
　　         var n = MonDays[m - 1];
    　　     if ( m == 2 && isLeapYear(y))
    　　     {
    　　         n++;
    　　     }
    　　     year.value=y;
    　　     month.value=m;
    　　     createDay(n,xq(y,m),y,m);
　　    }
    </script>

页面的HTML代码如下：

<!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>
    <title>WTN日历测试</title>
    <style type="text/css">
    body 
{
    background-color:#999999;
    margin:0px;
    font-family:微软雅黑;
    text-align:center;
}
 
/*日历*/
 
#wtncalendar
{
    border:dashed 1px #990000;
    text-align:center;
    font-size:9pt;
    width:165px;
}
 
#cdate
{
    background:#990000;
    cursor:hand;
    color:#ffffff;
}
 
#cselect
{
    background:#ffffff;
}
 
#previousmonth
{
    width:10px;
    height:10px;
    border:solid 0px #666666;
    background:url(images/calprevious.jpg);
    margin-bottom:4px;
}
 
#nextmonth
{
    width:10px;
    height:10px;
    border:solid 0px #666666;
    background:url(images/calnext.jpg);
    margin-bottom:4px;
}
 
.cal
{
    width:20px;
    height:18px;
    text-align:center;
    font-size:9pt;
    font-family:Arial;
}
 
#calitemcontent
{
    background-color:#cccccc;
}
 
#calitemheader
{  
    border-bottom:solid 1px #666666;
}
    </style>
<script type="text/javascript" src="calender.js">
</script>
</head>
<body onload="initDate(document.getElementById('select_year'),document.getElementById('select_month'))">
<div>WTN日历测试</div><br />
    <table id="wtncalendar" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td id="s">
            <div id="cselect">
                 <input id="previousmonth" type="button" onclick="previousmonth(document.getElementById('select_year'),document.getElementById('select_month'))"/>
                <select id="select_year" onchange="change(this,document.getElementById('select_month'))"></select>年
                <select id="select_month" onchange="change(document.getElementById('select_year'),this)"></select>月
               <input id="nextmonth" type="button" onclick="nextmonth(document.getElementById('select_year'),document.getElementById('select_month'))" />
            </div>
            <div id="cdate" onclick="initDate(document.getElementById('select_year'),document.getElementById('select_month'))">
            </div>
             </td>
        </tr>
        <tr>
        <td id="calitemcontent">
         <table border="0" cellpadding="0" cellspacing="0">
          <tr id="calitemheader">
            <td id="d1" class="cal">
                一</td>
            <td id="d2" class="cal">
                二</td>
            <td id="d3" class="cal">
                三</td>
            <td id="d4" class="cal">
                四</td>
            <td id="d5" class="cal">
                五</td>
            <td id="d6" class="cal">
                六</td>
            <td id="d7" class="cal">
                日</td>
        </tr>
        <tr>
            <td id="c1" class="cal">
                </td>
            <td id="c2" class="cal">
                </td>
            <td id="c3" class="cal">
                </td>
            <td id="c4" class="cal">
                </td>
            <td id="c5" class="cal">
                </td>
            <td id="c6" class="cal">
                </td>
            <td id="c7" class="cal">
                </td>
        </tr>
        <tr>
            <td id="c8" class="cal">
                </td>
            <td id="c9" class="cal">
                </td>
            <td id="c10" class="cal">
                </td>
            <td id="c11" class="cal">
                </td>
            <td id="c12" class="cal">
                </td>
            <td id="c13" class="cal">
                </td>
            <td id="c14" class="cal">
                </td>
        </tr>
        <tr>
            <td id="c15" class="cal">
                </td>
            <td id="c16" class="cal">
                </td>
            <td id="c17" class="cal">
                </td>
            <td id="c18" class="cal">
                </td>
            <td id="c19" class="cal">
                </td>
            <td id="c20" class="cal">
                </td>
            <td id="c21" class="cal">
                </td>
        </tr>
        <tr>
            <td id="c22" class="cal">
                </td>
            <td id="c23" class="cal">
                </td>
            <td id="c24" class="cal">
                </td>
            <td id="c25" class="cal">
                </td>
            <td id="c26" class="cal">
                </td>
            <td id="c27" class="cal">
                </td>
            <td id="c28" class="cal">
                </td>
        </tr>
        <tr>
            <td id="c29" class="cal">
                </td>
            <td id="c30" class="cal">
                </td>
            <td id="c31" class="cal">
                </td>
            <td id="c32" class="cal">
                </td>
            <td id="c33" class="cal">
                </td>
            <td id="c34" class="cal">
                </td>
            <td id="c35" class="cal">
                </td>
        </tr>
        <tr>
            <td id="c36" class="cal">
                </td>
            <td id="c37" class="cal">
                </td>
            <td id="c38" class="cal">
                </td>
            <td id="c39" class="cal">
                </td>
            <td id="c40" class="cal">
                </td>
            <td id="c41" class="cal">
                </td>
            <td id="c42" class="cal">
                </td>
           </tr>
        </table>
       </td>
      </tr>
     </table>
 
</body>
</html>

留言 0

暂无留言。