简易日历

代码演示

2009.11 日 一 二 三 四 五 六

 

程序源码

     var  $  =   function (id) {  return  document.getElementById(id); };

     var  Calendar  =   function (cID) {
         this .calendar  =  $(cID);
         var  D  =   new  Date();
         this .year  =  D.getFullYear();
         this .month  =  D.getMonth()  +   1 ;
         this .date  =  D.getDate();
         this .$getD  =   new  Date( this .year,  this .month,  0 ).getDate();
         this .onEnd  =   function (){};
         this .init();
    };
    Calendar.prototype  =  {
        constructor: Calendar,
         //  程序初始化
        init:  function () {
             var  _this  =   this ;
             this .drawC(  new  Date( this .year,  this .month,  0 ).getDate(),  new  Date( this .year,  this .month  -   1 ,  1 ).getDay(),  new  Date().getDate());
            $( ' prevM ' ).onclick  =   function () { _this.prevM(); };
            $( ' nextM ' ).onclick  =   function () { _this.nextM(); };
            $( ' prevY ' ).onclick  =   function () { _this.prevY(); };
            $( ' nextY ' ).onclick  =   function () { _this.nextY(); };
        },
         //  获得当前年月的日期数
        getDate:  function () {
             return   new  Date( this .year,  this .month,  0 ).getDate();
        },
         //  获取当月的第一天是星期几
        getDay:  function () {
             return   new  Date( this .year,  this .month  -   1 ,  1 ).getDay();
        },
         //  画日历
        drawC:  function (max, start, now){
             var  html  =   '' , j  =   0 , d  =   new  Date(), y  =  d.getFullYear(), m  =  d.getMonth()  +   1 ;
            html  +=   ' <table id="LBody" width="212"><tbody><tr> ' ;
             while (j ++   <  start) {
                html  +=   ' <td></td> ' ;
            }
             for ( var  i  =   0  ; i  <  max; i ++ ) {
                 if ((i  +   6   +  j)  %   7   ==   0 )  html  +=   ' <tr> ' ;
                html  +=   ' <td><a class= '   +  ((y  ==   this .year  &&  m  ==   this .month  &&  (i  +   1 )   ==  now)   ?   ' now '  :  ' normal ' )  +   '  href="javascript:void(0);"> '   +  (i  +   1 )  +   ' </a></td> ' ;
                 if ( ! ((i  +  j  +   1 )  *   7 )  /   7 ) html  +=   ' </tr> ' ;
            }
            html  +=   ' </tbody><table> ' ;
             this .calendar.innerHTML  =  html;
            $( ' showDate ' ).innerHTML  =   this .year  +   ' . '   +   this .month;
             this .onEnd();
        },
         //  前一月
        prevM:  function () {
             this .month -- ;
             if ( this .month  <   1 ) {  this .month  =   12 ; this .year  -=   1 ; }
             this .drawC( this .getDate(),  this .getDay(),  new  Date().getDate());
        },
         //  后一月
        nextM:  function () {
             this .month ++ ;
             if ( this .month  >   12 ) {  this .month  =   1 ; this .year  +=   1 ; }
             this .drawC( this .getDate(),  this .getDay(),  new  Date().getDate());
        },
         //  前一年
        prevY:  function () {
             this .year -- ;
             this .drawC( this .getDate(),  this .getDay(),  new  Date().getDate());
        },
         //  后一年
        nextY:  function () {
             this .year ++ ;
             this .drawC( this .getDate(),  this .getDay(),  new  Date().getDate());
        }
    }

 

使用说明

直接实例化即可

var  c  =   new  Calendar( ' CContainer ' );

 

代码示例下载

转载于:https://www.cnblogs.com/goodness2010/archive/2010/01/11/1644324.html