Question

当用户单击生成条形动画时，显示正在加载任务的用户。

我需要对代码进行哪些更改才能使条形图在生成结果时生成动画，并在结果准备就绪时停止动画。

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

Answer 1

将数据百分比属性添加到条形div。

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

进度条不断加载Javascript

1 个答案: