如何增加引导程序进度条? [英] How to increment a bootstrap progress bar?

问题描述

我刚刚开始使用 .php/Java 谁能告诉我如何让我的引导进度条根据用户设置的时间增加.

进度条:

代码:

<div id="progressbar" class="bar" style="width: 0%;"></div>

用户输入示例:代码:

设置秒数:

<input type="submit" value="Start" onclick="doProgress();"/>

Java 脚本{需要}:

代码:

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

我希望使用我提供的这个元素根据用户设置的值以秒为单位增加值:

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

解决方案

类似这样的事情(未经测试):

function doIncrement(increment) {w = parseInt(document.getElementById('progressBar').style.width);document.getElementById('progressBar').style.width= (w + increment) +'%';}无功var speed = document.getElementById('speed').value;无功增量=(速度/100)；for(var x = 0; x

I have just started out with .php/Java can someone show me how to get my bootstrap progress bar to increment in accordance with a users set time.

Progress Bar:

Code:

<div class="progress progress-striped active">

<div id="progressbar" class="bar" style="width: 0%;"></div>

User Input Example: Code:

Set Seconds:

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

<input type="submit" value="Start" onclick="doProgress();" />

Java Script {needed}:

Code:

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

 { 

 Idk :( Please help.

 };
 </script>

(style="width: 0%;") Is the progress bars value 100% being maximum.

I want the value to increase in accordance to the users set value in seconds using this element I provided:

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

example: the user enters 30 I want it to take 30 seconds for the progress bar to reach 100%

解决方案

Something like this (untested):

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

这篇关于如何增加引导程序进度条?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！