通过 JavaScript 为 Twitter Bootstrap 动态更改进度条的颜色

Question

Bootstrap 有许多预定义的进度条样式，但是如何使它们成为一些动态变化的功能。由于我对 javascript 的了解不足（codeacademy 的第一阶段），无法通过宽度样式的变化使它们动态变化，这就是问题所在。

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

需要通过javascript定义如果'value'，如果“bar”样式宽度>50%，当删除父类“bar-success”并添加类“bar-warning”，当样式宽度>80%时将其更改为“酒吧危险”。

用 jquery http://jsfiddle.net/ZQrnC/ 发现这样的事情，但认为最好有这样一个纯 js 脚本在引导程序中使用它。

在this question 中也推荐使用 addClass 但这对我来说似乎太难了

这里有一些引导进度条标记http://jsfiddle.net/pZ5mG/

谢谢！

Answer 1

这是一个严格的 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);

这是关于你想要完成的事情吗？ （显然您不会使用 Interval 来更新进度）