IT资讯 |  编程 |  数据库 |  安全 |  系统 |  服务器 |  嵌入式 |  设计 |  基础 |  组网 |  QQ | 

学写js Calender控件

作者:香草柠檬  发布日期:2014-08-21 20:49:03
  • 收藏本文    我要投稿
  •          好几个月没写博客了,一直在赶项目。项目现在终于处于稳定的状态,只是修修改改。作为后台程序员的我真是苦逼啊,从web到手机端接口我都得写,杂七杂八的事情。。。这两天终于闲下来了,没事儿看了一下关于js日期的一些函数,突然想到了日历控件,于是试着写了一个,作为后台程序员的我水平有限,大家抱着学习的态度看看我写的这个例子吧。。。

           首先一个常用的日期函数:Date(year,month,day)

                var   date=new  Date();

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

           获取月份,这里是月索引所以要+1
                var   month=this.date.getMonth()+1;

           获取当天是几号
                var   day=this.date.getDate();

           获取当天是周几,返回0.周日   1.周一  2.周二  3.周三  4.周四  5.周五  6.周六
                var   week=this.date.getDay();

           获取当月一号是周几

           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(){
     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         },
     24         getMonthDays:function(year,month){
     25             var  date=new Date(year,month,0);
     26             return  date.getDate();
     27         },
     28         getWeekDay:function(year,month,day){
     29             var  date=new Date(year,month,day);
     30             return  date.getDay();
     31         },
     32         View:function(){
     33             var  tablestr='<tr><td colspan='3'></td><td>年:'+this.year+'</td><td colspan='3'>月:'+this.month+'</td></tr>';
     34             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>';
     35             var  index=1;
     36             //判断每月的第一天在哪个位置
     37             var  style='';
     38             if(this.weekstart<7)
     39             {
     40                 tablestr+='<tr>';
     41                  for (var i = 0; i <this.weekstart; i++) {
     42                      tablestr+='<td></td>';
     43                  };
     44                  for (var i = 0; i < 7-this.weekstart; i++) {
     45                     style=this.day==(i+1)?'background-Color:green;':'';
     46                      index++;
     47                      tablestr+='<td style=''+style+'' val='+(this.year+'-'+this.month+'-'+(i+1))+'>'+(i+1)+'</td>';
     48                  };
     49                 tablestr+='</tr>';
     50 
     51             }
     52             ///剩余天数对应的位置
     53 
     54             //判断整数行并且对应相应的位置
     55             var  remaindays=this.monthdays-(7-this.weekstart);
     56             var  row=Math.floor(remaindays%7==0?remaindays/7:((remaindays/7)+1))  ;
     57             var   count=Math.floor(remaindays/7);
     58             for (var i = 0; i < count; i++) {
     59                  tablestr+='<tr>';
     60                  for (var k = 0; k < 7; k++) {
     61                       style=this.day==(index+k)?'background-Color:green;':'';
     62                       tablestr+='<td style=''+style+'' val='+(this.year+'-'+this.month+'-'+(index+k))+'>';
     63                       tablestr+=index+k;
     64                       tablestr+='</td>';
     65                  };
     66                  tablestr+='</tr>';
     67                  index+=7;
     68             };
     69 
     70             //最后剩余的天数对应的位置(不能填充一周的那几天)
     71             var  remaincols=this.monthdays-(index-1);
     72             tablestr+='<tr>';
     73             for (var i = 0; i < remaincols; i++) {
     74                 style=this.day==index?'background-Color:green;':'';
     75                 tablestr+='<td style=''+style+'' val='+(this.year+'-'+this.month+'-'+(index))+'>';
     76                 tablestr+=index;
     77                 tablestr+='</td>';
     78                 index++;
     79             };
     80             tablestr+='</tr>';
     81 
     82             return  tablestr;
     83         },
     84         Render:function(){
     85            var  table=document.createElement('table');
     86            table.style.border='1px  solid green';
     87            table.style.width='400px';
     88            table.style.height='auto';
     89            table.style.cursor='pointer';
     90            table.style.backgroundColor='lightgrey';
     91            table.onclick=function(e){
     92                 var  evt=e||window.event;
     93                 var   target=evt.srcElement||evt.target;
     94 
     95                 if(target&&target.getAttribute('val'))
     96                 {
     97 
     98                     alert(target.getAttribute('val'));
     99                 }
    100             
    101            }
    102             var  tablestr=this.View();
    103             this.tablestr=tablestr;
    104             table.innerHTML=tablestr;
    105             var  div=document.createElement('div');
    106             div.style.width='auto';
    107             div.style.height='auto';
    108              div.appendChild(table);
    109 
    110              ///翻页div
    111             var  pagerDiv=document.createElement('div');
    112             pagerDiv.style.width='auto';
    113             pagerDiv.style.height='auto';
    114 
    115                var  that=this;
    116 
    117 
    118                ///重新设置参数
    119             var    resetPara=function(year,month,day){
    120                     that.date=new  Date(year,month,day);
    121                     that.year=that.date.getFullYear();
    122                     that.month=that.date.getMonth()+1;
    123                     that.day=that.date.getDate();
    124                     that.week=that.date.getDay();
    125                     that.weekstart=that.getWeekDay(that.year, that.month-1, 1);
    126                     that.monthdays= that.getMonthDays(that.year,that.month);
    127             }
    128 
    129             //上一页
    130             var  preBtn=document.createElement('input');
    131              preBtn.type='button';
    132              preBtn.value='<';
    133 
    134               preBtn.onclick=function(){
    135                      document.body.removeChild(div);
    136                      resetPara(that.year,that.month-2,that.day);
    137                      that.Render();
    138 
    139              }
    140              //下一页
    141               var  nextBtn=document.createElement('input');
    142              nextBtn.type='button';
    143              nextBtn.value='>';
    144           
    145              nextBtn.onclick=function(){
    146                      document.body.removeChild(div);
    147                      resetPara(that.year,that.month,that.day);
    148                      that.Render();
    149 
    150              }
    151 
    152              pagerDiv.appendChild(preBtn);
    153              pagerDiv.appendChild(nextBtn);
    154              div.appendChild(pagerDiv);
    155 
    156              var  dropDiv=document.createElement('div');
    157              var    dropdivstr='';
    158              //选择年份
    159               dropdivstr+='<select id='ddlYear'>';
    160               for (var i = 1900; i <= 2100; i++) {
    161                 dropdivstr+= 
    162                 i==that.year
    163                 ?'<option  value=''+i+'' selected='true'>'+i+'</option>'
    164                 : '<option  value=''+i+''>'+i+'</option>';
    165               };
    166              dropdivstr+='</select>';
    167            
    168            //选择月份
    169             dropdivstr+='<select id='ddlMonth'>';
    170               for (var i = 1; i <= 12; i++) {
    171                 dropdivstr+=
    172                 i==that.month
    173                 ?'<option  value=''+i+'' selected='true'>'+i+'</option>'
    174                 : '<option  value=''+i+''>'+i+'</option>';
    175               };
    176              dropdivstr+='</select>';
    177              dropDiv.innerHTML=dropdivstr;
    178              div.appendChild(dropDiv);
    179             document.body.appendChild(div);
    180     
    181 
    182              ///绑定选择年份和月份的事件
    183              var  ddlYear=document.getElementById('ddlYear');
    184              var  ddlMonth=document.getElementById('ddlMonth');
    185          
    186              ddlYear.onchange=function(){
    187                  var   yearIndex=ddlYear.selectedIndex;
    188                  var  year=ddlYear.options[yearIndex].value;
    189                  var   monthIndex=ddlMonth.selectedIndex;
    190                  var  month=ddlMonth.options[monthIndex].value;
    191                 document.body.removeChild(div);
    192                 resetPara(year,month-1,that.day);
    193                 that.Render();
    194             }
    195 
    196              ddlMonth.onchange=function(){
    197                  var   yearIndex=ddlYear.selectedIndex;
    198                  var  year=ddlYear.options[yearIndex].value;
    199                  var   monthIndex=ddlMonth.selectedIndex;
    200                  var  month=ddlMonth.options[monthIndex].value;
    201                 document.body.removeChild(div);
    202                 resetPara(year,month-1,that.day);
    203                 that.Render();
    204                 
    205             }
    206         }
    207 
    208     }
    209 
    210 
    211     var   calender=new  Calender();
    212     calender.Render();
    213  
    214 }
    215     </script>
    216  
    217  
    218 </head>
    219 <body>
    220   
    221 </body>
    222 </html>

            上面代码有简单说明,功能是最基础的,如果更深入的做可以进行扩展,如有疑问或者要交流的东西请加qq546558309  ,或者发到我的邮箱a546558309@163.com

Tag标签:控件  
  • 专题推荐