JS实现日历

7.2--

以前写特效都用jquery，js使用还不熟的很，最近又在看《javascript权威指南》,正好公司的项目有个日历签到的功能，就先用js写个日历控件试试，目前还只实现了基本的功能。

7.3--

因为刚开始测试都是用的Chrome，所以IE没管，今天在IE上运行才发现根本没效果，果然js不比Jquery，不能一处运行，处处运行，而且IE9都不行，查查资料才知道IE的table元素的innerHtml是只读属性。

IE下的这些元素的innerHtml也是只读属性：COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR。

但td的innerHtml是可写属性,可利用这一点继续完善代码，提高通用性。

另外，因为IE6 下 table 元素是不支持 appendChild 方法,所以可对tbody操作，以提高通用性。

改进后的代码，“可爱”的IE6也能跑了。

自以为可爱的IE6都能跑了，就万事大吉了，没想到，火狐竟然不行，原来innerText属性火狐不支持,在火狐中与此类似的为textContent属性，我就懒得去判断了，于是把用到innerText的地方改为innerHtml了。这样一来，

也行了。果然纯js的兼容问题到处都在。

7.10--

代码结构按照面向对象的写法更改了不少。

以下为代码：

html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/data-plug-in.css"/>
</head>
<body>
    <input type="text" name="" id="input">
    <!--日历插件begin-->
    <div class="plug-in-date">
            <span class="plug-in-date-reduce" id="plug-in-date-reduce"><</span>
            <span class="plug-in-date-time"><span id="plug-in-date-year">2014</span>年<span id="plug-in-date-month">7</span>月</span>
            <span class="plug-in-date-add" id="plug-in-date-add">></span>
            <table class="plug-in-date-table" >
                  <thead>
                    <tr>
                        <th>日</th>
                        <th>一</th>
                        <th>二</th>
                        <th>三</th>
                        <th>四</th>
                        <th>五</th>
                        <th>六</th>
                    </tr>
                  </thead>
                  <tbody id="plug-in-date-tbody">
                  </tbody>
            </table>
    </div>
    <!--日历插件end-->
    <script src="js/date-plug-in.js"></script>
</body>
</html>

CSS

.plug-in-date{width: 200px;height: 210px;position:absolute;background: #f2f2f2;font-size:13px;font-family:"微软雅黑","黑体","宋体";border-radius:10px;-moz-border-radius: 10px;z-index: 9999;}
.plug-in-date-add,.plug-in-date-reduce{width:20px;height:20px;position: absolute;background:#1B1B1D;line-height:20px;text-align:center;color:#f2f2f2;cursor:pointer;z-index: 99;border-radius:3px;-moz-border-radius: 3px;-webkit-transition:background .3s;}
.plug-in-date-reduce:hover,.plug-in-date-add:hover{background-color: #3F3A3F;}
.plug-in-date-reduce{float: left;left: 10px;top: 10px;}
.plug-in-date-add{float: right;right: 10px;top: 10px;}
.plug-in-date-time{width: 100px;height: 20px;position:absolute;top:10px;left:50px;background:#C1C9D0;line-height:20px;text-align: center;color:#4A4A4A;z-index: 9;border-radius:5px;-moz-border-radius: 5px;}
.plug-in-date-table{width: 182px;position: absolute;top: 35px;left:9px;border-collapse: collapse;}
.plug-in-date-table td,.plug-in-date-table th{width: 20px;height:20px;line-height:20px;text-align:center;border-radius: 10px;}
.plug-in-date-table th{color: #18191B;}
.plug-in-date-table td.plug-in-date-not-cur-month{color:#B3B2B0; }
.plug-in-date-table td:hover{background:#C1C9D0;cursor: pointer;}
.plug-in-date-table td.plug-in-date-cur-time{background:#C1C9D0;}

  1 /**
  2  * @author taozhiwork@foxmail.com 2014-07-01
  3  * @version
  4  */
  5 
  6     var dpi = new DatePlugIn("input");
  7     dpi.initialization();
  8 /**
  9  * @class 日历控件类
 10  * @param{String} elementId 事件绑定对象ID
 11  * @constructor
 12  */
 13  function DatePlugIn(elementId){
 14     var _dateBtnReduce  = document.getElementById("plug-in-date-reduce"), //后退按钮
 15         _dateBtnAdd = document.getElementById("plug-in-date-add"), //前进按钮
 16         _dateYearE  = document.getElementById("plug-in-date-year"), //年份DOM元素
 17         _dateMonthE = document.getElementById("plug-in-date-month"), //月份DOM元素
 18         _dateContent = document.getElementById("plug-in-date-tbody"), //日历内容显示
 19         _dateOperation = new DateOperation(), //实例化日期操作类
 20         _curDate = new Date(), //当前日期
 21         _self = this,
 22         _year = _curDate.getFullYear(),
 23         _month  = _curDate.getMonth();
 24         this.inputElemant = document.getElementById(elementId);
 25     /**
 26      * 初始化日历插件方法
 27      */
 28     this.initialization = function(){
 29         //后退
 30         _dateBtnReduce.onclick = function(){
 31             _year = parseInt(_dateYearE.innerHTML);
 32             _month = _dateOperation.reduceMonth(parseInt(_dateMonthE.innerHTML));
 33             if(_month==12) _year = _dateOperation.reduceYear(_year);
 34             _dateMonthE.innerHTML = _month;
 35             _dateYearE.innerHTML = _year;
 36             _self.draw();
 37         }
 38         //前进
 39         _dateBtnAdd.onclick = function(){
 40             _year = parseInt(_dateYearE.innerHTML);
 41             _month = _dateOperation.addMonth(parseInt(_dateMonthE.innerHTML));
 42             if(_month==1) _year = _dateOperation.addYear(_year);
 43             _dateMonthE.innerHTML = _month;
 44             _dateYearE.innerHTML = _year;
 45             _self.draw();
 46         }
 47         this.draw();
 48     }
 49     /**
 50      * 绘制方法
 51      */
 52     this.draw = function(){
 53         var week,curDate,
 54             monthNumber1,monthNumber2, //关联月天数统计
 55             count1 = 0,count2 = 0,count3 = 0, //绘制控制
 56             tr,td;
 57         //计算当月1号为周几
 58         week = _dateOperation.getWeekDayByYearAndMonthAndDay(_year,_month,1);
 59         count1 = week;
 60         //计算关联三个月的天数
 61         monthNumber1 = _dateOperation.getDayNumberByYearAndMonth((_dateOperation.reduceMonth(_month)==12?_dateOperation.reduceYear(_year):_year),_dateOperation.reduceMonth(_month));
 62         monthNumber2 = _dateOperation.getDayNumberByYearAndMonth(_year,_month);
 63         for(var i = 0;i<6;i++){
 64             //清除历史记录
 65             if( _dateContent.childNodes.length>=6){
 66                 _dateContent.removeChild(_dateContent.firstChild);
 67             }
 68             tr = document.createElement("tr");
 69             for(var j =0 ;j<7;j++){
 70                 td = document.createElement("td");
 71                 td.onclick = function(){
 72                     _self.inputElemant.value = this.date;
 73                 }
 74                 if(i==0&&j<week){
 75                     curDate = monthNumber1-count1+1;
 76                     td.className += " plug-in-date-not-cur-month";
 77                     td.innerHTML = curDate;
 78                     td.date = (_dateOperation.reduceMonth(_month)==12?_dateOperation.reduceYear(_year):_year)+"-"+(_dateOperation.reduceMonth(_month))+"-"+curDate;
 79                     tr.appendChild(td);
 80                     count1--;
 81                     continue;
 82                 }
 83                 if(count2<monthNumber2){
 84                     curDate = count2+1;
 85                     td.innerHTML = curDate;
 86                     td.date = _year+"-"+_month+"-"+curDate;
 87                     if(_curDate.getFullYear()==_year&&_curDate.getMonth()+1==_month&&_curDate.getDate()==curDate){
 88                         td.className += "plug-in-date-cur-time";
 89                     }
 90                     tr.appendChild(td);
 91                     count2++;
 92                 }else{
 93                     curDate = count3+1;
 94                     td.innerHTML = curDate;
 95                     td.className += " plug-in-date-not-cur-month";
 96                     td.date = (_dateOperation.addMonth(_month)==1?_dateOperation.addYear(_year):_year)+"-"+(_dateOperation.addMonth(_month))+"-"+curDate;
 97                     tr.appendChild(td);
 98                     count3++;
 99                 }
100             }
101             _dateContent.appendChild(tr);
102         }
103     }
104  }
105 /**
106  * @class 日期操作类
107  * @constructor
108  */
109     function DateOperation(){
110         var MIN_YEAR = 2000;//最小年份
111         var MAX_YEAR = 2015;//最大年份
112     /**
113      * 年份增加
114      * @param{Number} year 年份数值
115      * @returns {Number} 年份自增后的数值
116      */
117         this.addYear = function(year){
118             year++;
119             if(year>MAX_YEAR)return MIN_YEAR;
120             else return year;
121         }
122     /**
123      * 年份减少
124      * @param{Number} year 年份数值
125      * @returns {Number} 年份减少后的数值
126      */
127         this.reduceYear = function(year){
128             year--;
129             if(year<MIN_YEAR)return MAX_YEAR;
130             else return year;
131         }
132     /**
133      * 月份减少
134      * @param{Number} month 月份值
135      * @returns {Number} 月份减少后的数值
136      */
137         this.reduceMonth = function(month){
138             month--;
139             if(month<1)return 12;
140             else return month;
141         }
142     /**
143      * 月份增加
144      * @param{Number} month 月份值
145      * @returns {Number} 月份增加后的数值
146      */
147         this.addMonth = function(month){
148             month++;
149             if(month>12) return 1;
150             else return month;
151         }
152     /**
153      * 根据年份月份得到该月份的天数
154      * @param{Number} year 年份值
155      * @param{Number} month 月份值
156      * @returns {Number} 天数
157      */
158         this.getDayNumberByYearAndMonth = function(year,month){
159             var LEAP_YEAR = 0; //闰年标记
160             var dayNumber = 0;
161             if(year%4==0&&year%100!=0||year%400==0) LEAP_YEAR = 1;
162             switch (month){
163                 case 1:case 3:case 5: case 7:case 8:case 10:case 12: dayNumber = 31;break;
164                 case 2:  dayNumber = 28+LEAP_YEAR;break;
165                 case 4:case 6:case 9:case 11: dayNumber = 30;break;
166             }
167             return dayNumber;
168         }
169     /**
170      * 根据年份、月份、日期计算这一天是周几
171      * @param{Number} year 年份值
172      * @param{Number} month 月份值
173      * @param{Number} day 日期值
174      * @returns {number} 周几
175      */
176         this.getWeekDayByYearAndMonthAndDay = function(year,month,day){
177             var myDate;
178             myDate=new Date();
179             myDate.setFullYear(year,month-1,day);
180             return myDate.getDay();
181         }
182    }

JS贴在这里先，慢慢优化。

posted on 2014-07-02 17:29 桃狗屎阅读(1547) 评论(0) 编辑收藏举报