年のカウンタをflipclock.jsに追加する

Question

年のカウンタをflipclockに追加したいのですが、 "日数"がサポートされている最大の単位のようです。

ディスプレイカウンタの1つとして年を追加するにはどうすればよいですか？興味がある人々のために

Answer 1

は、私がflipclock.jsに以下を追加：

/** 
* Gets number of years 
*/  

getYears: function() { 
    return Math.floor(this.time/60/60/24/7/52); 
}, 

そして、この：

 /** 
    * Gets a digitized yearly counter 
    * 
    * @return object Returns a digitized object 
    */ 

    getYearCounter: function(includeSeconds) { 
     var digits = [ 
      this.getYears(), 
      this.getDays(true), 
      this.getHours(true), 
      this.getMinutes(true) 
     ]; 

     if(includeSeconds) { 
      digits.push(this.getSeconds(true)); 
     } 

     return this.digitize(digits); 
    }, 

そして、この：

(function($) { 

    /** 
    * Yearly Counter Clock Face 
    * 
    * This class will generate a yearly counter for FlipClock.js. A 
    * yearly counter will track years, days, hours, minutes, and seconds. If 
    * the number of available digits is exceeded in the count, a new 
    * digit will be created. 
    * 
    * @param object The parent FlipClock.Factory object 
    * @param object An object of properties to override the default 
    */ 

    FlipClock.YearlyCounterFace = FlipClock.Face.extend({ 

     showSeconds: true, 

     /** 
     * Constructor 
     * 
     * @param object The parent FlipClock.Factory object 
     * @param object An object of properties to override the default 
     */ 

     constructor: function(factory, options) { 
      this.base(factory, options); 
     }, 

     /** 
     * Build the clock face 
     */ 

     build: function(time) { 
      var t = this; 
      var children = this.factory.$el.find('ul'); 
      var offset = 0; 

      time = time ? time : this.factory.time.getYearCounter(this.showSeconds); 

      if(time.length > children.length) { 
       $.each(time, function(i, digit) { 
        t.createList(digit); 
       }); 
      } 

      if(this.showSeconds) { 
       $(this.createDivider('Seconds')).insertBefore(this.lists[this.lists.length - 2].$el); 
      } 
      else 
      { 
       offset = 2; 
      } 

      $(this.createDivider('Minutes')).insertBefore(this.lists[this.lists.length - 4 + offset].$el); 
      $(this.createDivider('Hours')).insertBefore(this.lists[this.lists.length - 6 + offset].$el); 
      $(this.createDivider('Days')).insertBefore(this.lists[this.lists.length - 8 + offset].$el); 
      $(this.createDivider('Years', true)).insertBefore(this.lists[0].$el); 

      this.base(); 
     }, 

     /** 
     * Flip the clock face 
     */ 

     flip: function(time, doNotAddPlayClass) { 
      if(!time) { 
       time = this.factory.time.getYearCounter(this.showSeconds); 
      } 

      this.autoIncrement(); 

      this.base(time, doNotAddPlayClass); 
     } 

    }); 

}(jQuery)); 

そして出力に：

<div class="clock" style="margin:2em;"></div> 

     <script type="text/javascript"> 
      var clock; 

      $(document).ready(function() { 

       // Grab the current date 
       var currentDate = new Date(); 

       // Set some date in the future. In this case, it's always Jan 1 
       var futureDate = new Date(currentDate.getFullYear() + 22, 0, 1); 

       // Calculate the difference in seconds between the future and current date 
       var diff = futureDate.getTime()/1000 - currentDate.getTime()/1000; 

       // Instantiate a coutdown FlipClock 
       clock = $('.clock').FlipClock(diff, { 
        clockFace: 'YearlyCounter', 
        countdown: true 
       }); 
      }); 
     </script>