如何增加引导进度条？

Question

我刚开始使用 .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%

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

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

我已经放了一个演示和更多讨论on GitHub here。

Answer 3

我自己只是在学习引导程序，并想出了这个来推进它。正如其他答案中提到的，宽度 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);

});

Answer 4

试试这个：

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

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