使用小数计数Jquery

Question

我有这个代码，这是计数完美，但客户端希望它计数从16.5到9.99。我确信末尾的数字有可能包含两个十进制数。作为代码底部的一个选项，您会注意到有一个小数选项。也许数到一半时我可以把小数点后1位改成小数点后2位?我该怎么做呢?谢谢!

(function($) {
$.fn.countTo = function(options) {
    // merge the default plugin settings with the custom options
    options = $.extend({}, $.fn.countTo.defaults, options || {});
    // how many times to update the value, and how much to increment the value on each update
    var loops = Math.ceil(options.speed / options.refreshInterval),
        increment = (options.to - options.from) / loops;
    return $(this).each(function() {
        var _this = this,
            loopCount = 0,
            value = options.from,
            interval = setInterval(updateTimer, options.refreshInterval);
        function updateTimer() {
            value += increment;
            loopCount++;
            $(_this).html(value.toFixed(options.decimals));
            if (typeof(options.onUpdate) == 'function') {
                options.onUpdate.call(_this, value);
            }
            if (loopCount >= loops) {
                clearInterval(interval);
                value = options.to;
                if (typeof(options.onComplete) == 'function') {
                    options.onComplete.call(_this, value);
                }
            }
        }
    });
};
$.fn.countTo.defaults = {
    from: 0,  // the number the element should start at
    to: 100,  // the number the element should end at
    speed: 1000,  // how long it should take to count between the target numbers
    refreshInterval: 100,  // how often the element should be updated
    decimals: 1,  // the number of decimal places to show
    onUpdate: null,  // callback method for every time the element is updated,
    onComplete: null,  // callback method for when the element finishes updating
};
})(jQuery);

jQuery(function($) {
    $('#heroCounter').countTo({
        from: 16.5,
        to: 9.9,
        speed: 1500,
        refreshInterval: 50,
        onComplete: function(value) {
            console.debug(this);
        }
    });
});

Answer 1

如果我理解的话，你应该添加decimals选项:

    $('#heroCounter').countTo({
        from: 16.5,
        to: 9.9,
        speed: 1500,
        decimals: 2,
        refreshInterval: 50,
        onComplete: function(value) {
            console.debug(this);
        }
    });

或将$(_this).html(value.toFixed(options.decimals));改为$(_this).html(value.toFixed(2));

JSFIDDLE

更新: @Guillermo gutisamrez - $(_this).html(value.toFixed(options.decimals, 2).toString().replace(/(.[0-9]*?)0+$/, "$1"));

JSFIDDLE

Answer 2

要动态更改选项吗?是http://jsfiddle.net/tarabyte/82qBL/3/

添加选项get/set

$.fn.countTo = function(options) {
    if(typeof options === 'string') {
        var name = arguments[0],
            value = arguments[1];

        if(typeof value === 'undefined') { //getter
            var data = this.eq(0).data('countTo');
            return data && data[name];
        }
        return this.each(function(){ //setter
            var data = $(this).data('countTo');
            data && (data[name] = value);
        });
    }
    // merge the default plugin settings with the custom options
    options = $.extend({}, $.fn.countTo.defaults, options || {});
    ...
    $(this).data('countTo', options); //store current options in element's data

更改onUpdate选项

$('#heroCounter').countTo({
    from: 16.5,
    to: 7.11,
    speed: 2900,
    decimals: 1,
    refreshInterval: 50,
    onUpdate: function(value){
        console.log($(this).countTo('from')); //get prop
        if(value < 10) {
            $(this).countTo('decimals', 2); //set prop    
        }
    },
    onComplete: function(value) {
        console.debug(this);
    }
});