将年份计数器添加到flipclock.js中

对于任何感兴趣的人，我在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>