2

我想这是一个容易解决的问题，对谷歌来说有点棘手。我有这个函数，它随机生成一些数字 1 秒，直到它达到实际值（number()），只是一个浮华的效果。但是，该值是一个 7 位数字，我想用逗号分隔它。我对这两个功能都有工作功能，但我不知道如何让它们一起工作。我试图将digits()函数添加到我的number()函数中，但是当数字是随机生成时，我无法显示逗号，只有在完成后才能显示。

这是我的number()代码：

(function($){
    $.fn.extend({
        number: function(options) {
            if ( ! this.length)
                return false;

            this.defaults = {
                endAt: 90,
                numClass: 'autogen-num',
                interval: 65  // ms
            };
            var settings = $.extend({}, this.defaults, options);

            var $num = $('<span/>', {
                'class': settings.numClass
            });

            return this.each(function() {
                var $this = $(this);

                // Wrap each number in a tag.
                var frag = document.createDocumentFragment(),
                    numLen = settings.endAt.toString().length;
                for (x = 0; x < numLen; x++) {
                    var rand_num = Math.floor( Math.random() * 10 );
                    frag.appendChild( $num.clone().text(rand_num)[0] )
                }
                $this.empty().append(frag);

                var get_next_num = function(num) {
                    ++num;
                    if (num > 9) return 0;
                    return num;
                };

                // Iterate each number.
                $this.find('.' + settings.numClass).each(function() {
                    var $num = $(this),
                        num = parseInt( $num.text() );

                    var interval = setInterval( function() {
                        num = get_next_num(num);
                        $num.text(num);
                    }, settings.interval);

                    setTimeout( function() {
                        clearInterval(interval);
                    }, settings.duration * 1000 - settings.interval);
                });

                setTimeout( function() {
                    $this.text( settings.endAt.toString() );
                }, settings.duration * 1000);
            });
        }
    });
})(jQuery);

这是我的digits()代码：

$.fn.digits = function(){ 
    return this.each(function(){ 
        $(this).text( $(this).text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") ); 
    })
}

提前致谢！

4

2 回答 2

0

numbers 函数一次只替换一个数字，并且它依赖于数字是数字，因此在循环期间用包含逗号的字符串替换它们并不是一个真正的选择！

我重建了 numbers 函数来处理字符串。不知道它是否是你要找的东西，但它是我能得到的最接近的：

(function($){
    $.fn.numAnim = function(options) {
        if (!this.length) return false;

        this.defaults = {
            endAt: 2060,
            numClass: 'autogen-num',
            duration: 1,   // seconds
            interval: 30  // ms
        };
        var settings = $.extend({}, this.defaults, options),
            $this = this,
            interval = setInterval(function() {
                var numb = parseInt(Math.random() * (Math.pow(10, settings.endAt.toString().length)));
                $this.text(numb.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"));
            }, settings.interval),
            timer = setTimeout(function() {
                clearInterval(interval);
                $this.text(settings.endAt.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"));
            }, 1000*settings.duration);
    }
})(jQuery);


$("#number").numAnim({
    endAt: 4103518,
    duration: 1
});​

小提琴

于 2012-10-24T12:05:00.760 回答
0

您正在使用 jquery，但不知道您是否可以在其中放置回调 anyehrere。函数完成后触发回调。

在解决方法方面，您是说它会生成一个 1 秒的随机数，但您也说它有 7 位数字。无论哪种方式，您都会得到他的逻辑，并且肯定可以做出调整。

  1. 您创建一个布尔变量，一旦您的第二个（1000 毫秒）结束或您的随机数长度达到 7，它会将布尔变量切换为 true。
  2. 您稍后在您的代码中，添加一个 while 循环，直到该布尔值设置为 true 并从那里触发您的第二个函数。

我敢肯定，这是做到这一点的众多方法之一。希望能帮助到你。也许有人有更好的建议。谢尔斯！

于 2012-10-24T11:28:36.643 回答