進度條不斷加載Javascript

當用戶單擊生成一個條形圖動畫時，向用戶顯示該任務正在加載。進度條不斷加載Javascript

在我的代碼中需要做些什麼改變才能在製作結果時生成動畫並在結果準備就緒時停止動畫。

HTML：

<button class="btn" id="generate" type="submit">Generate</button> 

<div class="result" id="rslt"></div> 

<div class="progress"> 
    <div class="bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" data-percentage="100" style="width: 0%;"></div> 
</div>

JAVASCRIPT：

var generateButton = document.getElementById("generate"); 

if (generateButton.addEventListener) { 
    generateButton.addEventListener("click", random, false); 
} 
else if (generateButton.attachEvent) { 
    generateButton.attachEvent('onclick', random); 
} 

function random(e) { 
    setTimeout(function(){ 

     $('.progress .bar').each(function() { 
      var me = $(this); 
      var perc = me.attr("data-percentage"); 

      //TODO: left and right text handling 

      var current_perc = 0; 

      var progress = setInterval(function() { 
       if (current_perc>=perc) { 
        clearInterval(progress); 
       } else { 
        current_perc +=1; 
        me.css('width', (current_perc)+'%'); 
       } 

       me.text((current_perc)+'%'); 

      }, 50); 

     }); 

    },300); 

    var num = Math.random(); 

    var greetingString = num; 
    document.getElementById("rslt").innerText = greetingString; 
}

DEMO

來源

2013-10-28 kalpetros

我懷疑'perc'沒有正確設置，或者你遇到了'var current_perc'的範圍問題。 –

你的代碼中有'data-percentage'屬性集嗎？ – asafreedman

對不起，我忘了添加'數據百分比'。我更新了代碼。即使結果準備好後，酒吧也會繼續加載。我如何解決這個問題？ – kalpetros

添加數據百分比屬性欄格。

<div class="bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" data-percentage="100" style="width: 0%;"></div>

來源

2013-10-28 23:18:54 N20084753

進度條不斷加載Javascript

回答

相關問題