js 面向对象 模拟日历
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { padding:0; margin:0; } #calendar { width:408px; height:370px; /*border:1px solid #57abff;*/ margin:100px auto; } #calendar .inputBox { width:200px; height:25px; margin:2px; } #calendar .dataBox { display:none; } #calendar select { height:25px; } #calendar .selectMonth { width:60px; } #calendar .selectYear { width:100px; } #calendar .selectMonth { width:60px; } #calendar .dataBox table { width:100%; height:308px; text-align:center; margin-top:6px; border-top:1px solid #57abff; } #calendar .dataBox table tr:first-child{ height:12%; } #calendar .dataBox table,#calendar .dataBox th,#calendar .dataBox td { border-collapse:collapse; border-bottom:1px solid #ccc; } /*#calendar .dataBox table .current{ border:2px solid red; }*/ #calendar .dataBox table .current{ background-color:#FF9966; } #calendar .dataBox table .notCurMonth{ color:#ccc; } </style> </head> <body> <div id="calendar"> <!-- <input type="text" class="inputBox"> <div class="dataBox"> <select name="" id="" class="selectYear"> <option value="1992">1992</option> <option value="1993">1993</option> </select> <select name="" id="" class="selectMonth"> <option value="1">1</option> <option value="2">2</option> </select> <table> <tr> <th>一</th> <th>二</th> <th>三</th> <th>四</th> <th>五</th> <th>六</th> <th>日</th> </tr> <tr> <td class="current"><a href="">1</a></td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td class="current">7</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> </tr> </table> </div> --> </div> <script src="js/calendar.js"></script> <script type="text/javascript"> new Calendar({ "id":"calendar" }); </script>> </body> </html>
(function(){ window.Calendar = Calendar; function Calendar(JSON){ this.inputBox = null; this.calendarDiv = null; /*存放日历的容器*/ this.selectYear = null; this.selectMonth = null; this.tds = null; this.curYear = null; this.curMonth =null; this.curDate = null; this.dom = null; /*初始框架*/ this.init(JSON); /*获取日期*/ this.getData(); this.bindEvent(); } Calendar.prototype.init = function(Json){ /*初始化当前的日期*/ this.curYear = new Date().getFullYear(); this.curMonth = new Date().getMonth()+1; this.curDate = new Date().getDate(); /*框架的渲染*/ this.dom = document.getElementById(Json["id"]); /*创建输入框 上dom树*/ this.inputBox = document.createElement('input'); this.inputBox.className = 'inputBox'; this.dom.appendChild(this.inputBox); this.calendarDiv = document.createElement('div'); this.calendarDiv.className = 'dataBox'; this.dom.appendChild(this.calendarDiv); this.selectYear = document.createElement('select'); this.selectYear.className='selectYear'; for(var i=1990;i<2024;i++){ var option = document.createElement('option'); option.value = i; option.innerHTML = i; this.selectYear.appendChild(option); } this.calendarDiv.appendChild(this.selectYear); this.selectMonth = document.createElement('select'); this.selectMonth.className = 'selectMonth'; for(var i=1;i<13;i++){ var option = document.createElement('option'); option.value = i; option.innerHTML = i; this.selectMonth.appendChild(option); } this.calendarDiv.appendChild(this.selectMonth); /*创建 table */ var table = document.createElement('table'); var tr = document.createElement('tr'); var week = ["一","二","三","四","五","六","日"]; for(var i=0;i<7;i++){ var th = document.createElement('th'); th.innerHTML = week[i]; tr.appendChild(th); } table.appendChild(tr); for(var i=0;i<6;i++){ var tr = document.createElement('tr'); for(var j=0;j<7;j++){ var td = document.createElement('td'); //td.innerHTML = 1; tr.appendChild(td); } table.appendChild(tr); } this.calendarDiv.appendChild(table); this.tds = document.getElementsByTagName('td'); }; /*渲染日期*/ Calendar.prototype.getData = function(){ this.curDate = this.curDate?this.curDate:1; var date = new Date(this.curYear,this.curMonth-1,1); //当月第一天是星期几 this.curMonthFirstDay = date.getDay(); //当月一共有多少天 this.curMonthFirstDay = this.curMonthFirstDay?this.curMonthFirstDay:7; this.curMonthDays = new Date(new Date(this.curYear,this.curMonth,1)-1).getDate(); //上月最后一天是几号 this.lastMonthLastDate = new Date(date-1).getDate(); var lastMonthValue = this.lastMonthLastDate; //console.log("cur.curMonthFirstDay:",this.curMonthFirstDay,"cur.curMonthDays:",this.curMonthDays); //渲染上月的 for(var i = this.curMonthFirstDay-2; i>=0; i--){ this.tds[i].innerHTML = lastMonthValue; this.tds[i].className = 'notCurMonth'; lastMonthValue--; } //渲染当月的 for(var i = this.curMonthFirstDay-1; i<(this.curMonthDays+this.curMonthFirstDay-1);i++){ this.tds[i].innerHTML = (i-(this.curMonthFirstDay-1))+1; this.tds[i].className = ''; } //渲染下月的 for(i = this.curMonthFirstDay+this.curMonthDays-1;i<42;i++){ this.tds[i].innerHTML = (i-(this.curMonthFirstDay+this.curMonthDays-1))+1; this.tds[i].className = 'notCurMonth'; } /*获取当天的*/ var curentdate = new Date(this.curYear,this.curMonth-1,this.curDate).getDate(); var index = this.curMonthFirstDay+curentdate-2; this.tds[index].className = 'current'; this.selectYear.value = this.curYear; this.selectMonth.value = this.curMonth; //这里就是需要写option value this.inputBox.value = this.curYear+"-"+this.curMonth+"-"+this.curDate; }; /*绑定事件*/ Calendar.prototype.bindEvent = function(){ this.curDate = 1; var _this = this; this.selectYear.onchange = function(){ _this.curYear = _this.selectYear.value; _this.getData(); /*重绘日期*/ } this.selectMonth.onchange = function(){ _this.curMonth = _this.selectMonth.value; _this.getData(); /*重绘日期*/ } this.inputBox.onkeyup = function(event){ var event = window.event || event; if(event.keyCode == 13){ var inputVlaueStr = _this.inputBox.value; //console.log("inputVlaue:",inputVlaueStr); var reg = /^(\d{4})-(\d{1,2})-(\d{1,2})$/g; //记得括号 if(!inputVlaueStr.match(reg)){ alert("date input is error!"); return; } var inputVlaueArr = inputVlaueStr.split('-'); _this.curYear = inputVlaueArr[0]; _this.curMonth = inputVlaueArr[1]; _this.curDate = inputVlaueArr[2]; _this.getData(); } }; /*实现calendarDiv 开始隐藏，鼠标聚焦到inputBox上在显示出来*/ this.inputBox.onfocus = function(){ _this.dom.style.border = '1px solid #57abff'; _this.calendarDiv.style.display = 'block'; }; /*实现鼠标点击文档空白处div隐藏*/ document.addEventListener("click",function(event){ var event = window.event || event; if(event.target != _this.inputBox && event.target != _this.selectYear && event.target != _this.selectMonth && event.target.nodeName != 'TH' && event.target.nodeName != 'TD' && event.target != _this.calendarDiv && event.target != _this.dom){ _this.dom.style.border = 'none'; _this.calendarDiv.style.display = 'none'; } }); /*点击上月和下月的日期能够跳转到对应的月*/ for(var i=0;i<this.tds.length;i++){ (function(m){ _this.tds[m].onclick = function(){ if(m < _this.curMonthFirstDay-1){ _this.curMonth = _this.curMonth-1; if(_this.curMonth < 1){ _this.curMonth = 12; _this.curYear = _this.curYear-1; } _this.getData(); }else if(m >= (_this.curMonthFirstDay+_this.curMonthDays-1)){ _this.curMonth = _this.curMonth+1; if(_this.curMonth > 12){ _this.curMonth = 1; _this.curYear = _this.curYear+1; } _this.getData(); } } })(i); } }; })();
