2013-12-12 29 views
0

這裏是我的代碼新的隨機數的jQuery

(function ($) { 

     $.fn.snow2 = function (options) { 

      var $flake = $('<a style="text-decoration: none;" href="/flake"><div id="flake" /></a>').css({ 
       'position': 'absolute', 
       'top': '-50px', 
       'z-index': '100' 
      }).html('&#10052;'), 
       documentHeight = $(document).height(), 
       documentWidth = $(document).width(), 
       defaults = { 
        minSize: 30, 
        maxSize: 50, 
        newOn: Math.floor(Math.random() * 14000) + 7000, 
        flakeColor: "#CE1126" 
       }, 
       options = $.extend({}, defaults, options); 


      var interval = setInterval(function() { 
       var startPositionLeft = Math.random() * documentWidth - 100, 
        startOpacity = 0.5 + Math.random(), 
        sizeFlake = options.minSize + Math.random() * options.maxSize, 
        endPositionTop = documentHeight - 40, 
        endPositionLeft = startPositionLeft - 100 + Math.random() * 200, 
        durationFall = documentHeight * 10 + Math.random() * 5000; 
       $flake 
        .clone() 
        .appendTo('body') 
        .css({ 
         left: startPositionLeft, 
         opacity: startOpacity, 
         'font-size': sizeFlake, 
         color: options.flakeColor 
        }) 
        .animate({ 
          top: endPositionTop, 
          left: endPositionLeft, 
          opacity: 0.2 
         }, 
         durationFall, 
         'linear', 
         function() { 
          $(this).remove() 
         } 
       ); 
      }, options.newOn); 

     }; 

    })(jQuery); 

我試圖讓它在像7000個14000毫秒隨機間隔吐出了雪花,問題是當我調用函數它得到一個隨機數在7000到14000之間,並且一次又一次地使用相同的值。所以說它返回12806,它會每12806毫秒吐出一片雪花。我每次都需要一個新號碼。我將如何去完成這件事?我從一些不同的代碼中分解了這些代碼,並且對JavaScript或jQuery不太熟悉。任何幫助表示讚賞。

+0

我愛雪!多麼有趣的想法。 – andi

回答

2

問題是setInterval,這正是你所抱怨的。我想你寧可使用setTimeout。從Mozilla Developer Network

setTimeout()調用函數或在指定的延遲後執行代碼片段。

setInterval()重複調用一個函數或執行一個代碼片段,每次調用該函數之間都有固定的時間延遲。

1

是的我會使用setTimeout並用新的超時值調用函數本身。此外,我會設置newOn函數,而不是一個變量,因爲它只會被計算一次作爲一個變量。

看是否有此行爲小提琴像你這樣想:http://jsfiddle.net/e9KE9/1/

在撥弄我的第一超時設置爲0,這樣第一會立即出現。

P.s.s這感覺更像是雪:http://jsfiddle.net/e9KE9/2/很酷的主意!

$.fn.snow2 = function (options) { 
    var $flake = $('<a style="text-decoration: none;" href="/flake"><div id="flake" /></a>').css({ 
     'position': 'absolute', 
     'top': '-50px', 
     'z-index': '100' 
    }).html('&#10052;'), 
    documentHeight = $(document).height(), 
    documentWidth = $(document).width(), 
    defaults = { 
     minSize: 30, 
     maxSize: 50, 
     newOn: function(){return Math.floor(Math.random() * 14000) + 7000}, 
     flakeColor: "#CE1126" 
    }, 
    options = $.extend({}, defaults, options); 

    function newFlake() { 
     var startPositionLeft = Math.random() * documentWidth - 100, 
      startOpacity = 0.5 + Math.random(), 
      sizeFlake = options.minSize + Math.random() * options.maxSize, 
      endPositionTop = documentHeight - 40, 
      endPositionLeft = startPositionLeft - 100 + Math.random() * 200, 
      durationFall = documentHeight * 10 + Math.random() * 5000; 
     $flake 
      .clone() 
      .appendTo('body') 
      .css({ 
       left: startPositionLeft, 
       opacity: startOpacity, 
       'font-size': sizeFlake, 
       color: options.flakeColor 
      }) 
      .animate({ 
        top: endPositionTop, 
        left: endPositionLeft, 
        opacity: 0.2 
       }, 
       durationFall, 
       'linear', 
       function() { 
        $(this).remove() 
       } 
     ); 
     setTimeout(newFlake, options.newOn()); 
    }; 
    setTimeout(newFlake, options.newOn()); 
}(jQuery); 
+0

好的最後一個我保證:) http://jsfiddle.net/e9KE9/3/ –

+0

@克里斯B http://jsfiddle.net/e9KE9/1/真的很接近,但一旦它運行就吐出一片,我會如何做到這一點,以便即使是第一片都等待一個隨機時間? – user2687646

+0

哎呀對不起,我跑了,然後在我興奮的修改代碼改變了它。這個人應該先等待正確的時間。抱歉! http://jsfiddle.net/e9KE9/7/ –