[菜鸟自学二]简易日历

第一篇写的是日期联动下拉.主要也就是时间类的基本操作.见下面链接
http://topic.csdn.net/u/20091215/11/3e361cb7-6437-456c-b9ea-b1122401f9ff.html顺便也就写了这个简易日历.由于开始出发点不一样.导致这个小日历的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> Calendar </title>
  <style>
   .tbody { border-collapse: collapse; border-color: #78B3ED; background-color: #fff; }
   #Calendar { width: 212px; height: 150px;}
#CContainer a{ display: block;width: 30px;height: 30px;text-decoration: none; }
#CContainer a:hover { background-color: #B1EAF3;cursor: pointer; }
#LHeader { height: 21px;font-family: "宋体";font-size: 12px; }
.la { background-image:url(iconleft1.jpg);display:block;height: 20px;width: 21px; }
.ra { background-image:url(iconright1.jpg);display:block;height: 20px;width: 21px; }
.now { color: #990000; }
.normal { color: #999; }
#LDay td { font-family:"宋体";font-size: 12px;height: 30px;width: 30px;text-align: center; }
#LBody td { width: 30px;height: 30px;text-align: center;color: #999;font-family:"宋体";font-size: 12px;font-weight: bold; }
#showInfo { width: 212px;height: 30px;font-family:"宋体";font-size: 12px;font-weight: bold;text-align: left; }
  </style>
  <script type="text/javascript">
     /*!
     *  CalendarSimple
     *  http://www.cnblogs.com/goodness2010/
     *
     *  Copyright (c) 2009 GoodNess2010
     *  Date: 2009-1-12 (星期二)
     */
var $ = function(id) { return document.getElementById(id); };
var Calendar = function(cID) {
this.calendar = $(cID);
var D = new Date();
this.year = D.getFullYear();
this.month = D.getMonth() + 1;
this.date = D.getDate();
this.onEnd = function(){};
this.init();
};
Calendar.prototype = {
constructor: Calendar,
init: function() {
var _this = this;
this.drawC( new Date(this.year, this.month, 0).getDate(), new Date(this.year, this.month - 1, 1).getDay(), new Date().getDate());
$('prevM').onclick = function() { _this.prevM(); };
$('nextM').onclick = function() { _this.nextM(); };
$('prevY').onclick = function() { _this.prevY(); };
$('nextY').onclick = function() { _this.nextY(); };
}, getDate: function() {
return new Date(this.year, this.month, 0).getDate();
}, getDay: function() {
return new Date(this.year, this.month - 1, 1).getDay();
}, drawC: function(max, start, now){
var html = '', j = 0, d = new Date(), y = d.getFullYear(), m = d.getMonth() + 1;
html += '<table id="LBody" width="212"><tbody><tr>';
while(j++ < start) {
html += '<td></td>';
}
for(var i = 0 ; i < max; i++) {
if((i + 6 + j) % 7 == 0)  html += '<tr>';
html += '<td><a onclick="changeDate(this);" class=' + ((y == this.year && m == this.month && (i + 1)  == now)  ? 'now' : 'normal') + ' href="#">' + (i + 1) + '</a></td>';
if(!((i + j + 1) * 7) / 7) html += '</tr>';
}
html += '</tbody><table>';
this.calendar.innerHTML = html;
$('showDate').innerHTML = this.year + '.' + this.month;
this.onEnd();
}, prevM: function() {
this.month--;
if(this.month < 1) { this.month = 12;this.year -= 1; }
this.drawC(this.getDate(), this.getDay(), new Date().getDate());
}, nextM: function() {
this.month++;
if(this.month > 12) { this.month = 1;this.year += 1; }
this.drawC(this.getDate(), this.getDay(), new Date().getDate());
}, prevY: function() {
this.year--;
this.drawC(this.getDate(), this.getDay(), new Date().getDate());
}, nextY: function() {
this.year++;
this.drawC(this.getDate(), this.getDay(), new Date().getDate());
}
}

  </script>
 </head> <body>
<table id="Calendar" border="1" class="tbody">
<tbody>
<tr>
<td width="142">
<table id="LCalendar" class="tbody" width="212">
<tr>
<td height="21" bgcolor="#78b3ed" width="212">
<table id="LHeader" height="21" width="212">
<tbody>
<tr align="center">
<td align="center" width="21">
<a href="#" class="la" id="prevM"></a>
</td>
<td align="center">
<span id="showDate">2009.11</span>
</td>
<td align="center" width="21">
<a href="#" class="ra" id="nextM"></a>
</td>
</tr>
</tbody>
</table>   
 </td>                  
</tr>
<tr>
<td height="18">
   <table id="LDay" bgcolor="#e7f1fd">
  <tbody>
  <tr>
  <td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td>
  </tr>
  </tbody>
  </table>                           
</td>
</tr>
 <tr>
<td height="120" width="212" id="CContainer">                       
</td>
</tr>                       
</table>              
</td>
</tr>
</tbody>
</table>
<input type="button" value="前一年" id="prevY"/>
<input type="button" value="后一年" id="nextY"/>
   <div id="showInfo"></div>
  <script type="text/javascript">
var c = new Calendar('CContainer');
c.onEnd = function() {
$('showInfo').innerHTML = "您选择的日期为: " + this.year + '-' + this.month + '-' + this.date;
} function changeDate(ohref) {
$('showInfo').innerHTML = "您选择的日期为: " + c.year + '-' + c.month + '-' + ohref.innerHTML;
}
  </script>
 </body>
</html>
[文字说明]
这只是一个日历的简版.主要就是基本的Date函数操作.1.求本月第一天星期几
new Date(y, m, 1).getDay();2.求该月共有多少天 
new Date(y, m+1, 0).getDate()
主要思路就是先取得当月第一天是星期几.然后先把起始空白填满后,然后再正常循环表格生成表格日期.[代码演示]
参见我的blog
http://www.cnblogs.com/goodness2010/archive/2010/01/11/1644324.html

解决方案 »

  1.   

    以前用php做过一个，道理一样的
      

  2.   

    在<head>后面加上
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    不然在ie7下会出错，文字是乱码，报js错
      

  3.   

    谢谢.我的html文件编码为utf-8. 你的IE7应该默认编码不是UTF-8吧 你说的charset我加上了 谢谢你的提醒
      

  4.   

    以前我写了个日历，是为小孩普及日历知识写的，不依赖date函数，推算出来的，只是另一个算法而已，
    http://lixt127.512j.com/my2009/rili.php，代码见源文件