编了个Javascript日历

by shinichi_wtn 2008-08-30 13:56

为了在博客系统中增加日历功能,自己用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>

(仅用于Gavatar)

  Country flag

biuquote
  • Comment
  • Preview
Loading

About

shinichi_wtnI'm Shinichi_wtn

Software Engineering Manager at Microsoft

[More...]

Recent Tweets

Twitter November 29, 00:30
周末再刷环球影城,这次把之前没有玩过的项目都体验了一遍,试了一下园区的照相服务,拍得一般般,还成功打卡了三把扫帚餐厅,餐厅有一个绝佳的城堡观景台 https://t.co/6UXPrv6gCx

Twitter November 20, 21:35
大闸蟹 https://t.co/aofvI1miI1

Twitter September 19, 20:56
开园就限流😳 https://t.co/P5jRS6gENg

Twitter September 6, 23:51
环球城市大道 https://t.co/ZIcpGmigvp

Twitter September 6, 23:14
北京环球影城探路,试运行时期依旧不少人,下午抵达时停车楼已经没空闲车位了,只能停在地面停车场。目前乐园外的城市大道已经免费开放,在环球商店里面买了一些纪念品,价格和日本环球影城差不多,整体商品数量还挺少的。乐园还有2周就正式开放了… https://t.co/820oxZeKQo

Twitter August 26, 21:38
傍晚的彩虹🌈 https://t.co/lkS7lSksSq

Twitter August 22, 21:01
密云天门山爬山,周六天气不错 https://t.co/Sc8t6XXLBG

Twitter August 1, 14:37
北京周末终于晴天了😃,前段时间雨太多了 https://t.co/jjrtR2izgA


Follow me on twitter >>

Month List