专注于技术经验交流

水至清则无鱼、宁静而致远!

技术、经验、学习共同打造网络新生活!
  首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

用脚本制作的日历附带源码

Posted on 2006-12-09 14:20  小鱼儿  阅读(261)  评论(0编辑  收藏  举报
今天是 日 星期
用脚本实现的日历附带源码
<table style="BORDER-TOP-WIDTH: 0px; BORDER-COLLAPSE: collapse" borderColor="#993333" height="225"
                  cellSpacing="0" width="180" border="1">
                  <tr>
                        <td vAlign="top" bgColor="#f3f5fc" height="100%">
                              <div align="center">
                                    <table height="100%" cellSpacing="0" cellPadding="0" width="100%" border="0">
                                          <tr>
                                                <td vAlign="middle">
                                                      <!-- 日历 -->
                                                      <table borderColor="white" height="100%" cellSpacing="0" cellPadding="0" width="100%" align="center"
                                                            border="0">
                                                            <tr align="center" bgColor="#993333" height="22">
                                                                  <td class="tdclass"><font color="white">今天是 <span id="layerYear"></span>年<span id="layerMonth"></span>月<span id="layerDay"></span>日
                                                                              星期<span id="layerWeek"></span></font></td>
                                                            </tr>
                                                            <tr align="center">
                                                                  <td><span id="layerCalendar"></span></td>
                                                            </tr>
                                                      </table>
                                                      <script language="JavaScript" type="text/javascript">
<!--
var dayArray=new Array("日","一","二","三","四","五","六");
var monthArray=[31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
var stringTable="<table cellspacing=\"0\" cellpadding=\"0\" border=\"1\" align=\"center\" bordercolor=\"#8F8FAF\" width=\"100%\" height=\"100%\"><tr bgcolor=\"\" align=\"center\">";
for (var i=0; i<dayArray.length; ++i)
{
      stringTable+="<td class=\"tdclass\"><font color=\"#993333\"><b>"+dayArray[i]+"</b></font></td>";
}
stringTable+="</tr>";
function setValue(tag, str)
{
      document.getElementById(tag).innerHTML=str;
}
function showTime()
{
      var today=new Date();
      var currentYear=today.getFullYear()
      if (((currentYear%4==0)&&(currentYear%100!=0))||(currentYear%400==0))
            monthArray[1]=29;
      var allDays=monthArray[today.getMonth()];
      var currentWeek=today.getDay();
      var currentDay=today.getDate();
      var i=currentDay%7-currentWeek;
      var threshold=(7+i)%7;
      var isEnd=false;
      var stringAll=stringTable;
      while (true) {
            if (isEnd) {
                  stringAll+="<td class=\"tdclass\" bgcolor=\"#EEEEEE\"> </td>";
                  if (i % 7==(threshold+6)%7) {
                        stringAll+="</tr>";
                        break;
                  }
            } else {
                  if (i % 7==threshold)
                        stringAll+="<tr align=\"center\">";
                  stringAll+=i>0?"<td class=\"tdclass\""+(i==currentDay?" bgcolor=\"#FEA477\" style=\"color: #FFFFFF\"":"")+"><b>"+i+"</b></td>":"<td class=\"tdclass\" bgcolor=\"#EEEEEE\"> </td>";
                  if (i % 7==(threshold+6)%7) {
                        stringAll+="</tr>";
                        if (i==allDays)
                              break;
                  }
                  if (i==allDays)
                        isEnd=true;
            }
            ++i;
      }
      stringAll+="</table>";
      setValue("layerYear", currentYear);
      setValue("layerMonth", today.getMonth()+1);
      setValue("layerDay", currentDay);
      setValue("layerWeek", dayArray[currentWeek]);
      setValue("layerCalendar", stringAll);
}
showTime()
// -->
                                                      </script>
                                                      <!-- 日历end --></td>
                                          </tr>
                                    </table>
                              </div>
                        </td>
                  </tr>
            </table>
New Document