面向对象实现简单日历
html页面：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> <title></title> <style> ._calendar_zyl{ width: 80%; height: 350px; border: 1px solid #eee; padding: 10px 20px; position: absolute; top: 50px; margin-left: 5px; z-index: 999999; } ._calendar_zyl .top{ widow:100%; height: 30px; } ._calendar_zyl .table{ width: 100%; height: 300px; } ._calendar_zyl .fl{ float: left; } ._calendar_zyl .preYear{ margin-left: 20px; } ._calendar_zyl .fr{ float: right; } ._calendar_zyl .nextYear{ margin-right: 20px; } ._calendar_zyl .top{ position: relative; } ._calendar_zyl .top #showCalendar{ position: absolute; display: block; width: 70px; left: 50%; margin-left: -35px; text-align: center; } </style> <script src="calendar.js"></script> </head> <body> <div class="_calendar_zyl" id="calendar"> <div class="top"><span id="preMonth" class="fl"><</span><span id="preYear" class="fl preYear"><<</span> <span id="showCalendar"></span><span id="nextMonth" class="fr">></span><span id="nextYear" class="fr nextYear">>></span> </div> <table class="table" id="tb"></table> </div> </body> <script> var cal = document.getElementById("calendar"); var tb = document.getElementById("tb"); var calendar = new Calendar({ wrap:cal, tb:tb },function(ret){ console.log(ret); console.log("jjjjj"); }); </script> </html>
js实现：
/** * Created by Administrator on 2015/11/18. */ function Calendar(param,callback_fn){ this.wrap = param.wrap; this.tb = param.tb; this.year = 0; this.month = 0; this.dy = 0; this.init = function(){ var currDate = new Date(); this.year = currDate.getFullYear(); this.month = currDate.getMonth(); this.dy = currDate.getDate(); this.initTable(currDate.getFullYear(),currDate.getMonth(),currDate.getDate()); var self = this; var preMonth = document.getElementById("preMonth"); var nextMonth = document.getElementById("nextMonth"); var preYear = document.getElementById("preYear"); var nextYear = document.getElementById("nextYear"); //点击上一月触发的事件 preMonth.addEventListener("click",function(){ if(self.month == 0){ self.year--; self.month = 11; }else{ self.month--; } self.initTable(self.year,self.month,self.dy); }); //点击下一月触发的事件 nextMonth.addEventListener("click",function(){ if(self.month == 11){ self.year++; self.month = 0; }else{ self.month++ } self.initTable(self.year,self.month,self.dy); }); //点击上一年触发的事件 preYear.addEventListener("click",function(){ self.year--; self.initTable(self.year,self.month,self.dy); }); //点击下一年触发的事件 nextYear.addEventListener("click",function(){ self.year++; self.initTable(self.year,self.month,self.dy); }); function tapTd(e){ var target = e.target; if(target.nodeName.toLocaleLowerCase() == "td"){ var dy = target.innerHTML; var ret = { year:self.year, month:self.month+1, dy:dy } callback_fn.call(self,ret); self.wrap.style.display = "none"; self.tb.removeEventListener("click",tapTd); } } //点击单元格 this.tb.addEventListener("click",tapTd); } this.init(); } Calendar.prototype.initTable = function(year,month,dy){ var dyNum = getDysOfMonth(year);//当前月的天数 var firstDay = getFirstDay(year,month,dy);//当前月第一天是星期几 var trNum=Math.ceil((dyNum[month] + firstDay)/7);//表格的行数 var str = "<tr><td align='center'>日</td><td align='center'>一</td><td align='center'>二</td><td align='center'>三</td><td align='center'>四</td><td align='center'>五</td><td align='center'>六</td></tr>"; for(i=0;i<trNum;i++) { //表格的行 str+="<tr>"; for(k=0;k<7;k++) { //表格每行的单元格 idx=i*7+k; //单元格自然序列号 date_str=idx-firstDay+1; //计算日期 (date_str<=0 || date_str>dyNum[month]) ? date_str=" " : date_str=idx-firstDay+1; //过滤无效日期（小于等于零的、大于月总天数的） //打印日期：今天底色为红 date_str==dy ? str+="<td align='center' bgcolor='red'>" + date_str + "</td>" : str+="<td align='center'>" + date_str + "</td>"; } str+="</tr>"; //表格的行结束 } var showCalendar = document.getElementById("showCalendar"); showCalendar.innerHTML = year+"-"+(month+1); this.tb.innerHTML = str; } Calendar.prototype.showCal = function(){ this.wrap.style.display = "block"; } Calendar.prototype.hideCal = function(){ this.wrap.style.display = "none"; } /** * @desc :该方法获取指定月份的第一天是星期几 * @param year：年 * @param month：月 * @param dy：日 * @returns {number} 当月第一天是星期几 */ function getFirstDay(year,month,tdy){ var n1str=new Date(year,month,1); //当月第一天Date资讯 var firstday=n1str.getDay(); //当月第一天星期几 console.log(firstday); return firstday; } /** * @desc:该方法获取指定年的每个月的天数 * @param year :年 * @returns {Array} 每个月的天数 */ function getDysOfMonth(year){ var sepMon = 28 + (year%100==0?res=(year%400==0?1:0):res=(year%4==0?1:0)); var m_days=new Array(31,sepMon,31,30,31,30,31,31,30,31,30,31); //各月份的总天数 return m_days; }
