替換以前的JS/JQuery號碼

我想補充一些網站現在有的效果，即喝咖啡，然後咖啡數量逐漸增加，從0逐漸增加到N-1。這是我的嘗試，如果我在第一個if語句的控制檯中打印i，則會打印出每個數字。但是，在HTML中，它會立即從0-950變爲無數字。替換以前的JS/JQuery號碼

要總結它：我想在頁面上增加的數字，每個新號碼替換其以前的號碼。

for (i = 0; i < 950; i++) { 
    if ($("#counter").length) { 
    setTimeout(function() { 
     // body... 
     $("#counter").append('<p id = "counter">' + i + '</p>'); 
    }, 2000); 
    console.log(i); 

    } else { 
    $(".coffee-drank").append('<p id = "counter">' + i + '</p>'); 
    } 

}

來源

2017-07-22 James

add timeout。它如預期的增加，但要快看 –

我試過，已經做了同樣的事情= /但只是慢一點，從0到949，非常緩慢。 – James

那你想要什麼？它應該取代以前的數字呢？ –

如果我有你的想法正確，一般可以做到這樣的：

var start = -1, end = 950; 
 
var countUp = function func() { 
 
      if(start >= end) return; 
 
      var elem = document.getElementById("counter"); 
 
      elem.innerText = ++start; 
 
      setTimeout(func, 25); 
 
     } 
 
countUp();

count up to 950: 
 
<span id="counter">0</span>

UPDATE 在你的情況可能是這樣的（沒有必要一個循環）：

var start = -1, end = 950; 
var countUp = function func() { 
     if(start >= end) { 
     // the end is reached; start is equal to 950 now; do something useful and quit 
     $(".coffee-drank").append('<p id = "counter">' + start +'</p>'); 
     return; 
     } 
     $("#counter").text(++start); 
     setTimeout(func, 25); 
    } 

countUp();

來源

2017-07-22 14:48:14 curveball

知道爲什麼我當前的實現不能正常工作會很有用嗎？ – James

你需要一個計時器。如果沒有定時器，週期會立即生效 - 所有的值從0到950都會立即傳遞。 – curveball

我用我添加的定時器編輯過，仍然無法使用。出於某種原因，我相信當它進入第一個if語句時，它會不斷返回950，而不是1,2,3,4 ... – James

用此替換您的for循環：

var speed = 16; // Lower is faster 
increase(0, 950); 
function increase(i, max){ 
    if(i <= max){ 
     if ($("#counter").length) { 
      $("#counter").html(i); 
     } else { 
      $(".coffee-drank").append('<p id = "counter">' + i + '</p>'); 
     } 
     setTimeout(function(){ 
      increase(++i, max); 
     }, speed); 
    } 
}

來源

2017-07-22 14:48:42 noisehost

替換以前的JS/JQuery號碼

回答

相關問題