JS实现日历
浏览数：21 /
时间：2015年06月09日
7.2--
以前写特效都用jquery，js使用还不熟的很，最近又在看《javascript权威指南》,正好公司的项目有个日历签到的功能，就先用js写个日历控件试试，目前还只实现了基本的功能，先贴代码：
html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <meta charset="utf-8"> 6 <link rel="stylesheet" href="css/data-plug-in.css"/> 7 </head> 8 <body> 9 <div class="plug-in-date"> 10 <span class="plug-in-date-reduce" id="plug-in-date-reduce"><</span> 11 <span class="plug-in-date-time"><span id="plug-in-date-year">2014</span>年<span id="plug-in-date-month">7</span>月</span> 12 <span class="plug-in-date-add" id="plug-in-date-add">></span> 13 <table class="plug-in-date-table" id="plug-in-date-table"> 14 </table> 15 </div> 16 <script src="js/date-plug-in.js"></script> 17 </body> 18 </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
/* *JavaScript日期显示 *vesion：1.0.0 *作者：陶z or Xiaoz or TaoShiFu *Blog地址：http://www.cnblogs.com/xiaozweb *创建日期：2014-7-1 *最后修改日期：2014-7-2 */ var dateBtnReduce,dateBtnAdd; //操作按钮 var dateYearE; //年 var dateMonthE; //月 var dateContent;//显示区 dateBtnReduce = document.getElementById("plug-in-date-reduce"); dateBtnAdd = document.getElementById("plug-in-date-add"); dateYearE = document.getElementById("plug-in-date-year"); dateMonthE = document.getElementById("plug-in-date-month"); dateContent = document.getElementById("plug-in-date-table"); var datePlugIn = new DatePlugIn(); //日期操作 //后退 dateBtnReduce.onclick = function(){ var year,month; year = parseInt(dateYearE.innerText); month = parseInt(dateMonthE.innerText); month = datePlugIn.reduceMonth(month); if(month==12) year = datePlugIn.reduceYear(year); dateMonthE.innerText = month; dateYearE.innerText = year; dateContent.innerHTML = new DrawDate(year,month,datePlugIn).draw(); } //前进 dateBtnAdd.onclick = function(){ var year,month; year = parseInt(dateYearE.innerText); month = parseInt(dateMonthE.innerText); month = datePlugIn.addMonth(month); if(month==1) year = datePlugIn.addYear(year); dateMonthE.innerText = month; dateYearE.innerText = year; dateContent.innerHTML = new DrawDate(year,month,datePlugIn).draw(); } var date = new Date(); dateContent.innerHTML = (new DrawDate(date.getFullYear(),date.getMonth()+1,datePlugIn)).draw(); //图形绘制类 function DrawDate(year,month,datePlugIn){ this.year = year; this.month = month; //绘制 this.draw = function(){ var htmlContent; var week; var monthNumber1,monthNumber2; //关联月天数统计 var count1=0,count2=0,count3=0; //绘制控制 //计算当月1号为周几 week = datePlugIn.getWeekDayByYearAndMonthAndDay(this.year,this.month,1); count1 = week; //计算关联三个月的天数 monthNumber1 = datePlugIn.getDayNumberByYearAndMonth((datePlugIn.reduceMonth(month)==12?datePlugIn.reduceYear(this.year):this.year),datePlugIn.reduceMonth(month)); monthNumber2 = datePlugIn.getDayNumberByYearAndMonth(this.year,this.month); htmlContent = "<tr>"+ "<th>日</th>"+ "<th>一</th>"+ "<th>二</th>"+ "<th>三</th>"+ "<th>四</th>"+ "<th>五</th>"+ "<th>六</th>"+ "</tr>"; for(var i = 0;i<6;i++){ htmlContent += "<tr>"; for(var j =0 ;j<7;j++){ if(i==0&&j<week){ htmlContent += "<td class=‘plug-in-date-not-cur-month‘>"+(monthNumber1-count1+1)+"</td>"; count1--; continue; } if(count2<monthNumber2){ htmlContent += "<td>"+(count2+1)+"</td>" count2++; }else{ htmlContent += "<td class=‘plug-in-date-not-cur-month‘>"+(count3+1)+"</td>" count3++; } } htmlContent +="</tr>"; } return htmlContent; } } //日期操作类 function DatePlugIn(){ var MIN_YEAR = 2000;//最小年份 var MAX_YEAR = 2015;//最大年份 //年份减少 this.addYear = function(year){ year++; if(year>MAX_YEAR)return MIN_YEAR; else return year; } //年份增加 this.reduceYear = function(year){ year--; if(year<MIN_YEAR)return MAX_YEAR; else return year; } //月份减少 this.reduceMonth = function(month){ month--; if(month<1)return 12; else return month; } //月份增加 this.addMonth = function(month){ month++; if(month>12) return 1; else return month; } //根据年份月份得到天数 this.getDayNumberByYearAndMonth = function(year,month){ var LEAP_YEAR = 0; var dayNumber = 0; if(year%4==0&&year%100!=0||year%400==0) LEAP_YEAR = 1; switch (month){ case 1:case 3:case 5: case 7:case 8:case 10:case 12: dayNumber = 31;break; case 2: dayNumber = 28+LEAP_YEAR;break; case 4:case 6:case 9:case 11: dayNumber = 30;break; } return dayNumber; } //根据年月日得到周几 this.getWeekDayByYearAndMonthAndDay = function(year,month,day){ var myDate=new Date(); myDate.setFullYear(year,month-1,day); return myDate.getDay(); } }
贴在这里先，慢慢优化。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
