首页 > 代码库 > JS实现日历
JS实现日历
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(); }}
贴在这里先，慢慢优化。
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。