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;}
JS
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贴在这里先，慢慢优化。