0

この JQuery を 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;
}

これがライブバージョンです：http://jsfiddle.net/chjjK/9/

4

1 に答える 1

1

実際には非常に簡単document.getElementsByClassNameで、forループを使用してそれぞれを置き換えます。

var bar = document.getElementsByClassName("bar");
    for (var i = 0; i < bar.length; i++) {
        var me = bar[i];
        var perc = me.getAttribute("data-percentage");
        var current_perc = 0;

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

            me.innerHTML = ((current_perc)+'%');

        }, 50);
    }
}, 300);

デモ: http://jsfiddle.net/chjjK/13/

于 2013-11-06T14:14:18.003 に答える