1

数値まですばやくカウントアップするアニメーション カウンターがあります。数字にカンマを追加する必要がありますが (千の単位で)、その方法がわかりません (明らかに、私たちは専門家です)。

私たちが持っているものは、カウンターに対して完全に機能します。

(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: 0,  // 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($) {
    $('.shares').countTo({
        from: 2,
        to: 1826,
        speed: 3000,
        refreshInterval: 50,
        onComplete: function(value) {
            console.debug(this);
        }
    });
});

助言がありますか？

4

4 に答える 4

1

jQueryの同じスニペットで同じ問題が発生したため、この投稿を見ていました。これが私の本当に簡単な解決策でした：onUpdate関数をこれに編集するだけです...

onUpdate: function (value) {
    var counter= $("#counter").text();
    $("#members").text(counter.substring(0, 3)+","+counter.substring(3, 6));
}

これは、1,000,000 未満の数値に対してのみ機能します。それ以外の場合は、パラメーターを変更し.substring()ます。

于 2013-10-23T19:22:09.233 に答える
0

私はこれをテストしていませんが、あなたはこれを理解していると確信しています。

jQuery.i18n.formatNumber( value, format, [ options ] )Returns: String

したがって、 onUpdateMethod を Null から次のような本体を持つものに置き換える必要があります

control.innerText =  jQuery.i18n.formatNumber( value, "n0")

地域設定を強制したい場合は、ロケールを渡すことで実行できます

詳細はこちら - http://www.jquerysdk.com/api/jQuery.i18n.formatNumber

于 2013-06-10T07:24:17.840 に答える
0

他の人が言ったように、onUpdate関数を追加することでこの問題を解決しましたが、オブジェクトを知らなかったので、「this」を使用して内部テキストを設定できることを発見しました。よく働く！

        jQuery(this).find('.milestone-count').delay(6000).countTo({
            from: 0,
            to: 100000,
            speed: 2000,
            refreshInterval: 100,
            onUpdate: function (value) {
                if(this.innerText) // firefox doesn't support innerText
                {
                    this.innerText = newVal;
                } else {
                    this.textContent = newVal;
                }
            }
        });
于 2014-04-02T17:46:16.160 に答える