进度条不断加载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

回答

相关问题