1

Bootstrapには、プログレスバー用に事前定義されたスタイルが多数ありますが、それらを動的に変更する機能にする方法。javascript（codeacademyの最初の段階）についての私の知識が乏しいため、幅のスタイルを変更することによって動的に変更させることはできません。それが問題です。

<div class="progress bar-success">
<div class="bar" style="width: 'value'%"></div>
</div>

親クラス「bar-success」を削除し、クラス「bar-warning」を追加するときに「bar」スタイル幅> 50％の場合、スタイル幅> 80％の場合、javascriptで定義する必要があります。スタイル幅> 80％の場合、「bar-danger」に変更します。 "。

jquery http://jsfiddle.net/ZQrnC/でこのようなsmthが見つかりましたが、純粋なjs用のこのようなスクリプトをブートストラップで使用する方がよいと思います。

この質問でもaddClassを使用することをお勧めしますが、これは私には難しすぎるようです

ここにいくつかのブートストラッププログレスバーマークアップhttp://jsfiddle.net/pZ5mG/

ありがとうございました！

4

1 に答える 1

4

これが厳密にvanilla.jsソリューションです：http：//jsfiddle.net/pZ5mG/2/

HTML

<div class="progress">
    <div id="myProgress" class="bar bar-danger"></div>
</div>​

JS

var bar = document.getElementById("myProgress");
var progress = 0;


function setProgress(percent){
    bar.style.width = percent + "%";

    if (percent > 90)
        bar.className = "bar bar-success";
    else if (percent > 50)
        bar.className = "bar bar-warning";
}

var interval = setInterval(
    function(){
        setProgress(++progress);
        if (progress == 100) window.clearInterval(interval);
    }, 100);

これはあなたが達成したいことについてですか？（明らかに、進行状況を更新するために間隔を使用することはありません）

于 2012-08-30T21:02:24.500 に答える