1

Bootstrap has many pre-defined styles for progress bar, but how to make them some dynamic changing feature. With my poor knowledge of javascript (first stages on codeacademy), can't make them change dynamically by width style changing, and that's the question.

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

need to define by javascript if 'value', if "bar" style width >50% when remove parent class "bar-success" and add class "bar-warning", when style width >80% change it to "bar-danger".

found smth like this with jquery http://jsfiddle.net/ZQrnC/ but think it would be better to have such a script for pure js to use it in bootstrap.

in this question also reccomended to use addClass but this seems too difficult for me

here some bootstrap progress bar markup http://jsfiddle.net/pZ5mG/

Thank you!

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 回答