用jQuery增加數字

Question

我如何使用下面的代碼顯示變量增量而不影響彼此，我試圖在同一頁面上使用腳本來顯示不同的值，這些值會隨着時間的推移而增加，但是即使在div1和div2中，即使它們具有不同的var，我也會得到相同的值當我在單獨的頁面上使用它們時，下面的代碼工作正常，但是當我將它們放到同一頁面上時，兩個div的結果相同。

我需要幫助以使它們正常工作而不影響彼此或其他任何選擇

我需要實際起作用的代碼，而不僅僅是說明

 <script> var START_DATE = new Date("May 10, 2010 22:30:00"); var INTERVAL = 8; var INCREMENT = 60; var START_VALUE = 250; var count = 0; $(document).ready(function() { var msInterval = INTERVAL * 1000; var now = new Date(); count = parseInt((now - START_DATE)/msInterval) * INCREMENT + START_VALUE; $('#div1').html(count.toFixed(0)); window.setInterval( function(){ count1 += INCREMENT; $('#div1').html(count.toFixed(0)); }, msInterval); }); </script> <script> var START_DATE = new Date("March 10, 2010 22:30:00"); var INTERVAL = 10; var INCREMENT = 10; var START_VALUE = 350; var count = 0; $(document).ready(function() { var msInterval = INTERVAL * 1000; var now = new Date(); count = parseInt((now - START_DATE)/msInterval) * INCREMENT + START_VALUE; $('#div2').html(count.toFixed(0)); window.setInterval( function(){ count1 += INCREMENT; $('#div2').html(count.toFixed(0)); }, msInterval); }); </script> 

Answer 1

我認為您可以將代碼塊包裝在IFEE中，即

(function(){
    //code here
}());

Answer 2

盡管dzylich的答案是正確的，但以下是對發生的情況的更詳盡的解釋：

Javascript具有一個全局范圍，不了解模塊或名稱空間。 在script標記的頂級范圍中聲明的所有var都在全局名稱空間中，因此您的代碼就像您編寫的那樣運行：

var count1 = whatever;
//do some stuff
var count1 = whatever; //count1 redeclared!

在同一script 。 避免此問題的一種常用方法是將每段代碼包裝在立即調用的函數表達式 （IIFE）中，以為每個腳本標簽創建作用域：

<script>
  (function() {
      var counter1 = whatever;
      //do stuff to counter1
  })();
</script>

<script>
  (function() {
     var counter1 = whatever; //different than the other counter1, exp follows
     //do whatever
  })();
</script>

因為每個代碼塊都包裝在一個函數中（該函數為該函數中定義的var創建新作用域），所以兩個“ counter1”實際上是不同的變量。 請注意，除非顯式返回它們，否則不能訪問另一個IIFE包裝的塊中的內容，請參見顯示模塊模式 。

Answer 3

這是因為您的count聲明相互覆蓋。 更改您的count變量之一的名稱，它將起作用。