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

Question

我想为 flipclock 添加一个年计数器，但“天”似乎是现成支持的最大单位。

如何修改以将年份添加为显示计数器之一？

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>