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 {needed}：

代码：

 <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%';

如何增加引导进度条？

4 个答案: