Question

Bootstrap为进度条提供了许多预定义的样式，但是如何使它们具有一些动态更改功能。由于我对javascript（codeacademy的第一阶段）知之甚少，无法通过宽度样式更改动态地进行更改，这就是问题所在。

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

需要通过javascript定义'value'，如果“bar”样式宽度＆gt; 50％，当删除父类“bar-success”并添加类“bar-warning”时，样式宽度＆gt; 80％更改它为了“危险”。

使用jquery http://jsfiddle.net/ZQrnC/发现这样的smth，但是认为让纯js的这样一个脚本在bootstrap中使用它会更好。

this question中的

也建议使用addClass但这对我来说似乎太难了

这里有一些bootstrap进度条标记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来更新进度）

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

1 个答案: