php - 如何增加 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();" />

Java 脚本{需要}:

代码:

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

 { 

 Idk :( Please help.

 };
 </script>

(style="width: 0%;") 进度条值100%是否最大。

我希望使用我提供的这个元素在几秒钟内根据用户设置的值增加值:

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

示例:用户输入30我希望进度条达到100%需要30秒

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