學寫js Calender控件

時間 2019-12-09

原文原文鏈接

好幾個月沒寫博客了，一直在趕項目。項目如今終於處於穩定的狀態，只是修修改改。做爲後臺程序員的我真是苦逼啊，從web到手機端接口我都得寫，雜七雜八的事情。。。這兩天終於閒下來了，沒事兒看了一下關於js日期的一些函數，忽然想到了日曆控件，因而試着寫了一個，做爲後臺程序員的我水平有限，你們抱着學習的態度看看我寫的這個例子吧。。。javascript

首先一個經常使用的日期函數：Date(year,month,day)css

var date=new Date();html

獲取年份
var year=this.date.getFullYear();java

獲取月份，這裏是月索引因此要+1
var month=this.date.getMonth()+1;程序員

獲取當天是幾號
var day=this.date.getDate();web

獲取當天是周幾，返回0.週日 1.週一 2.週二 3.週三 4.週四 5.週五 6.週六
var week=this.date.getDay();app

獲取當月一號是周幾ide

       var     getWeekDay=function(year,month,day){
           var date=new Date(year,month,day);
            return date.getDay();
       }函數

　　　var weekstart= getWeekDay(this.year, this.month-1, 1)學習

       獲取當月的天數
   var getMonthDays=function(year,month){
           var date=new Date(year,month,0);
           return date.getDate();
       }
        var   monthdays= this.getMonthDays(this.year,this.month);

好了，咱們用到的參數就這麼多，後面其實就是關於日期對應周幾的一些操做和判斷，動態的拼接標籤，下面就直接把我寫的例子發出來：

  1 <html>    
  2 <meta  http-equiv="content-type" content="text/html;charset=utf-8">
  3 <head>
  4     <style type="text/css">
  5 
  6 td{ text-align: center;}
  7     </style>
  8     <script type="text/javascript">
  9      
 10 window.onload=function(){
 11     var   Calender=function(){
 12         this.Init.apply(this,arguments);
 13     }
 14     Calender.prototype={
 15         Init:function(container,options){
 16             this.date=new  Date();
 17             this.year=this.date.getFullYear();
 18             this.month=this.date.getMonth()+1;
 19             this.day=this.date.getDate();
 20             this.week=this.date.getDay();
 21             this.weekstart=this.getWeekDay(this.year, this.month-1, 1);
 22             this.monthdays= this.getMonthDays(this.year,this.month);
 23             this.containerDiv=document.getElementById(container);
 24             this.options=options!=null?options:{
 25                 border:'1px  solid green',
 26                 width:'400px',
 27                 height:'200px',
 28                 backgroundColor:'lightgrey',
 29                 fontColor:'blue'
 30             }
 31         },
 32         getMonthDays:function(year,month){
 33             var  date=new Date(year,month,0);
 34             return  date.getDate();
 35         },
 36         getWeekDay:function(year,month,day){
 37             var  date=new Date(year,month,day);
 38             return  date.getDay();
 39         },
 40         View:function(){
 41             var  tablestr='<table>';
 42               tablestr+='<tr><td colspan="3"></td><td>年:'+this.year+'</td><td colspan="3">月：'+this.month+'</td></tr>';
 43             tablestr+='<tr><td width="14%">日</td><td width="14%">一</td><td width="14%">二</td><td width="14%">三</td><td width="14%">四</td><td width="14%">五</td><td width="14%">六</td></tr>';
 44             var  index=1;
 45             //判斷每個月的第一天在哪一個位置
 46             var  style='';
 47             if(this.weekstart<7)
 48             {
 49                 tablestr+='<tr>';
 50                  for (var i = 0; i <this.weekstart; i++) {
 51                      tablestr+='<td></td>';
 52                  };
 53                  for (var i = 0; i < 7-this.weekstart; i++) {
 54                     style=this.day==(i+1)?"background-Color:green;":"";
 55                      index++;
 56                      tablestr+='<td style="'+style+'" val='+(this.year+'-'+this.month+'-'+(i+1))+'>'+(i+1)+'</td>';
 57                  };
 58                 tablestr+='</tr>';
 59 
 60             }
 61             ///剩餘天數對應的位置
 62 
 63             //判斷整數行而且對應相應的位置
 64             var  remaindays=this.monthdays-(7-this.weekstart);
 65             var  row=Math.floor(remaindays%7==0?remaindays/7:((remaindays/7)+1))  ;
 66             var   count=Math.floor(remaindays/7);
 67             for (var i = 0; i < count; i++) {
 68                  tablestr+='<tr>';
 69                  for (var k = 0; k < 7; k++) {
 70                       style=this.day==(index+k)?"background-Color:green;":"";
 71                       tablestr+='<td style="'+style+'" val='+(this.year+'-'+this.month+'-'+(index+k))+'>';
 72                       tablestr+=index+k;
 73                       tablestr+='</td>';
 74                  };
 75                  tablestr+='</tr>';
 76                  index+=7;
 77             };
 78 
 79             //最後剩餘的天數對應的位置(不能填充一週的那幾天)
 80             var  remaincols=this.monthdays-(index-1);
 81             tablestr+='<tr>';
 82             for (var i = 0; i < remaincols; i++) {
 83                 style=this.day==index?"background-Color:green;":"";
 84                 tablestr+='<td style="'+style+'" val='+(this.year+'-'+this.month+'-'+(index))+'>';
 85                 tablestr+=index;
 86                 tablestr+='</td>';
 87                 index++;
 88             };
 89             tablestr+='</tr>';
 90             tablestr+='</table>';
 91             return  tablestr;
 92         },
 93         Render:function(){
 94            var  calenderDiv=document.createElement('div');
 95            calenderDiv.style.border=this.options.border;
 96            calenderDiv.style.width=this.options.width;
 97            calenderDiv.style.height=this.options.height;
 98            calenderDiv.style.cursor='pointer';
 99            calenderDiv.style.backgroundColor=this.options.backgroundColor;
100            // calenderDiv.style.color=this.options.fontColor;
101            calenderDiv.style.color='red' ;
102 
103            calenderDiv.onclick=function(e){
104                 var  evt=e||window.event;
105                 var   target=evt.srcElement||evt.target;
106 
107                 if(target&&target.getAttribute('val'))
108                 {
109 
110                     alert(target.getAttribute('val'));
111                 }
112             
113            }
114             var  tablestr=this.View();
115             this.tablestr=tablestr;
116             calenderDiv.innerHTML=tablestr;
117             var  div=document.createElement('div');
118             div.style.width='auto';
119             div.style.height='auto';
120              div.appendChild(calenderDiv);
121 
122              ///翻頁div
123             var  pagerDiv=document.createElement('div');
124             pagerDiv.style.width='auto';
125             pagerDiv.style.height='auto';
126 
127                var  that=this;
128 
129 
130                ///從新設置參數
131             var    resetPara=function(year,month,day){
132                     that.date=new  Date(year,month,day);
133                     that.year=that.date.getFullYear();
134                     that.month=that.date.getMonth()+1;
135                     that.day=that.date.getDate();
136                     that.week=that.date.getDay();
137                     that.weekstart=that.getWeekDay(that.year, that.month-1, 1);
138                     that.monthdays= that.getMonthDays(that.year,that.month);
139             }
140 
141             //上一頁
142             var  preBtn=document.createElement('input');
143              preBtn.type='button';
144              preBtn.value='<';
145 
146               preBtn.onclick=function(){
147                      that.containerDiv.removeChild(div);
148                      resetPara(that.year,that.month-2,that.day);
149                      that.Render();
150 
151              }
152              //下一頁
153               var  nextBtn=document.createElement('input');
154              nextBtn.type='button';
155              nextBtn.value='>';
156           
157              nextBtn.onclick=function(){
158                      that.containerDiv.removeChild(div);
159                      resetPara(that.year,that.month,that.day);
160                      that.Render();
161 
162              }
163 
164              pagerDiv.appendChild(preBtn);
165              pagerDiv.appendChild(nextBtn);
166              div.appendChild(pagerDiv);
167 
168              var  dropDiv=document.createElement('div');
169              var    dropdivstr='';
170              //選擇年份
171               dropdivstr+='<select id="ddlYear">';
172               for (var i = 1900; i <= 2100; i++) {
173                 dropdivstr+= 
174                 i==that.year
175                 ?'<option  value="'+i+'" selected="true">'+i+'</option>'
176                 : '<option  value="'+i+'">'+i+'</option>';
177               };
178              dropdivstr+='</select>';
179            
180            //選擇月份
181             dropdivstr+='<select id="ddlMonth">';
182               for (var i = 1; i <= 12; i++) {
183                 dropdivstr+=
184                 i==that.month
185                 ?'<option  value="'+i+'" selected="true">'+i+'</option>'
186                 : '<option  value="'+i+'">'+i+'</option>';
187               };
188              dropdivstr+='</select>';
189              dropDiv.innerHTML=dropdivstr;
190              div.appendChild(dropDiv);
191            that.containerDiv.appendChild(div);
192     
193 
194              ///綁定選擇年份和月份的事件
195              var  ddlChange=function(){
196                      var  ddlYear=document.getElementById('ddlYear');
197                     var  ddlMonth=document.getElementById('ddlMonth');
198                     var   yearIndex=ddlYear.selectedIndex;
199                     var  year=ddlYear.options[yearIndex].value;
200                     var   monthIndex=ddlMonth.selectedIndex;
201                     var  month=ddlMonth.options[monthIndex].value;
202                     that.containerDiv.removeChild(div);
203                     resetPara(year,month-1,that.day);
204                     that.Render();
205              }
206 
207             ddlYear.onchange=function(){
208                  ddlChange();
209             }
210 
211              ddlMonth.onchange=function(){
212                  ddlChange();
213                 
214             }
215         }
216 
217     }
218 
219 
220     var   calender=new  Calender('dvTest',{
221                 border:'1px  solid green',
222                 width:'400px',
223                 height:'200px',
224                 backgroundColor:''
225                 }
226                 );
227     calender.Render();
228  
229 }
230     </script>
231  
232  
233 </head>
234 <body>
235   <div id="dvTest"></div>
236 </body>
237 </html>