3

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

4

4 回答 4

3

像这样的东西（未经测试）：

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);
}
于 2012-08-31T15:55:08.063 回答
2

该setTimeout方法（根据其他答案）是动画基于时间的进度的最常见方法。

But I've had a problem with setTimeout if the speed is fast or when I want to reset the bar from 100% to 0%, as the default Bootstrap css transitions lead to undesirable animation effects (i.e takes 0.6 seconds to return to 0%). So I suggest tweaking the transition styling to match the desired animation effect e.g

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

But if you're in the jQuery camp, then jQuery.animate is I think a neater approach as you can forget having to mess with css transition styling and counting steps etc e.g.

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

I've put a demo and more discussion on GitHub here.

于 2016-04-28T14:09:06.140 回答
1

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

});
于 2014-12-29T06:49:23.430 回答
0

试试这个：

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

//Set the width style
divArray.style.width = '100%';
于 2012-08-31T15:48:02.327 回答