如何增加Bootstrap进度条的进度？

Question

我刚刚开始接触.php/Java，能否有人向我展示如何使我的Bootstrap进度条根据用户设置的时间递增。

进度条：

代码：

<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();" />

需要的是 JavaScript：

代码：

 <script type="text/javascript">
 function doProgress()

 { 

 Idk :( Please help.

 };
 </script>

(style="width: 0%;") 进度条的值为100%时表示达到最大值。

我希望通过提供的元素，在几秒钟内根据用户设置的值逐渐增加该值：

<input type="text" id="speed" value="10" /> 

例如：用户输入30，我希望进度条需要30秒才能到达100％。

- Koala

---

你需要做的就是设置进度条的宽度。 - Waleed Khan

通过简单的循环，将#progressbar的CSS width属性增加1，直到达到100。 - Gntem

Answer 1

类似这样的代码（未经测试）：

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);
}

- Steve Valliere

---

你想让它随着时间缓慢增加吗？还是你希望在他们点击后等待那么长时间再将其设置为100％？ - Steve Valliere

随着时间的增加，例如用户输入30秒，我希望进度条在30秒内移动到100％，而不是立即跳到100％。 - Koala

怎么样？我更新了我的答案。 - Steve Valliere

Answer 2

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上放了一个演示和更多讨论，与IT技术有关。请点击链接查看。

- tardate

Answer 3

我正在学习Bootstrap，为了进一步提高它的使用，我自己创作了这个。正如其他答案中所提到的，CSS属性width似乎是触发动画的关键，但我最初没有注意到它，而是设置了相关的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);

});

- Kyle

Answer 4

试试这个：

//Find the div you want to update
var divArray = document.getElementById('progressbar');

//Set the width style
divArray.style.width = '100%';

- Daniel Pokusa

---

我希望根据用户在以下提供的元素中设置的值，以秒为单位增加数值：<input type="text" id="speed" value="10" /> 例如，如果用户输入30，则我希望进度条需要30秒才能达到100%。 - Koala