我刚开始使用php/Java，有人能告诉我如何让我的引导进度条根据用户设置的时间递增吗。
进度条：
代码：
<div class="progress progress-striped active">
<div id="progressbar" class="bar" style="width: 0%;"></div>
用户输入示例：代码：
设置秒数：
<input type="text" id="speed" value="10" />
<input type="submit" value="Start" onclick="doProgress();" />
Java脚本｛需要｝：
代码：
<script type="text/javascript">
function doProgress()
{
Idk :( Please help.
};
</script>
（style="width:0%；"）进度条值100%是否为最大值。
我希望使用我提供的这个元素，根据用户设置的值在几秒钟内增加值：
<input type="text" id="speed" value="10" />
示例：用户输入30我希望进度条需要30秒才能达到100%
类似的东西（未经测试）：
function doIncrement(increment) {
w = parseInt(document.getElementById('progressBar').style.width);
document.getElementById('progressBar').style.width= (w + increment) +'%';
}
var w
var speed = document.getElementById('speed').value;
var increment = (speed/100);
for(var x = 0; x<speed; x++)
{
setTimeout(doIncrement(increment),1000);
}
setTimeout方法（根据其他答案）是最常见的基于时间的进度动画方法。
但是，如果速度很快，或者当我想将条形图从100%重置为0%时，我对setTimeout有一个问题，因为默认的Bootstrap css转换会导致不理想的动画效果（即需要0.6秒才能返回到0%）。所以我建议调整过渡样式以匹配所需的动画效果，例如
pb = $('[role="progressbar"]')
// immediate reset to 0 without animation
pb.css('transition', 'none');
pb.css('width', '0%');
// now animate to 100% with setTimeout and smoothing transitions
pb.css('transition', 'width 0.3s ease 0s');
var counter = 0;
var update_progress = function() {
setTimeout(function() {
pb.attr('aria-valuenow', counter);
pb.css('width', counter + '%');
pb.text(counter + '%');
if(counter<100) {
counter++;
update_progress();
}
}, 5 * 1000 / 100); // 5 seconds for 100 steps
};
update_progress();
但如果你在jQuery阵营，那么jQuery.animate是一种更整洁的方法，因为你可以忘记必须处理css转换样式和计数步骤等，例如
pb = $('[role="progressbar"]')
pb.css('transition', 'none'); // if not already done in your css
pb.animate({
width: "100%"
}, {
duration: 5 * 1000, // 5 seconds
easing: 'linear',
step: function( now, fx ) {
var current_percent = Math.round(now);
pb.attr('aria-valuenow', current_percent);
pb.text(current_percent+ '%');
},
complete: function() {
// do something when the animation is complete if you want
}
});
我在GitHub上放了一个演示和更多讨论。
我自己只是在学习bootstrap，并想出了这个来推进它。正如其他答案中提到的，width CSS属性似乎是触发动画的原因，但我最初没有注意到它，并设置了相关的aria属性。如果a11y对您很重要，您可能希望确保设置宽度会导致其他相关属性得到正确更新，如果不重要，则根据需要进行设置。
$( function() {
var bar = $('div.progress-bar');
var val = null;
i1 = setInterval(function() {
val = parseInt(bar.attr('aria-valuenow'));
val += 10;
console.log(val);
if( val < 101) {
bar.attr('aria-valuenow', val);
bar.css('width', val + '%');
} else {
clearInterval(i1);
}
}, 1000);
});
试试这个：
//Find the div you want to update
var divArray = document.getElementById('progressbar');
//Set the width style
divArray.style.width = '100%';