2012-10-24 110 views
2

我想這是一個很容易解決的問題,對谷歌來說只是有點棘手。我有這個功能,隨機產生一些數字1秒,直到它達到真正的價值(number()),只是一個華麗的效果。但是,該值是一個7位數字,我想用逗號分隔它。我有兩個功能的工作功能,但我不知道如何讓他們一起工作。我試圖將digits()函數添加到我的number()函數中,但是當數字是隨機生成的時候,只有在完成後才能顯示逗號。添加函數在jQuery中運行

這是我的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,")); 
    }) 
} 

在此先感謝!

+0

如何瞭解這兩項設置了[小提琴](http://jsfiddle.net)向我們展示他們應該如何工作。 – adeneo

+0

@ adeneo當然,這是數字動畫:http://jsfiddle.net/Cheezen/3pGpN/26/ – Cheezen

回答

0

數字函數在當時只替換一個數字,它依賴於數字是數字,因此在循環中用包含逗號的字符串替換它們並不是一個真正的選項!

我重建了數字函數來處理字符串。不知道,如果它是你在找什麼,但它是最接近我能得到:

(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 
});​ 

FIDDLE

+0

這正是我所期待的,非常感謝! <3 – Cheezen

0

您正在使用jquery,但是id不知道是否可以在其中放入回調anyehrere。當功能完成後觸發回調。

在解決方法方面,您說的是,它會生成一個隨機數字1秒,但您也會說它有7位數字。無論哪種方式,你都會得到他的邏輯,而且肯定可以做到這一點。

  1. 你讓一個布爾變量,一旦你的第二個(1000毫秒)是高於或隨機數的長度得到7,它的布爾切換爲true。
  2. 您稍後在您的代碼中添加一個while循環,直到該布爾值設置爲true並從那裏觸發第二個函數爲止。

我敢肯定這是多種方法之一。希望能幫助到你。也許有人有更好的消化。 Chhers!