如何增加引导程序进度条？

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

（式= “宽度：0％;”）是对进度条价值100％为最大值。

我想要的值，以使用该元件I提供了根据在几秒钟的设定值的用户增加：

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

例如：用户输入30我希望它需要30秒钟的进度条达到100％

来源

2012-08-31 Koala

您只需设置进度条的宽度即可。 –

另外，Java！= Javascript。 –

更改'＃progressbar'' + 1'的CSS'width'属性直到你达到'100'，一个简单的循环就可以完成 – Gntem

像这样（未经）：

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-31 15:55:08

您希望它随着时间缓慢增加？或者你希望它在点击它之后等待很长时间以将其设置为100％？ –

随着时间的推移增加例如用户放置30秒我希望进度条在30秒内移动到100％，而不是立即跳到100％ – Koala

那怎么样？更新了我的答案。 –

试试这个：

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

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

来源

2012-08-31 15:48:02

我希望根据用户设置的值增加这个值，使用这个元素I提供：例如用户输入30我希望进度条达到100％需要30秒 – Koala

我只是学习引导自己，并提出了这个推进它。正如其他答案中所提到的，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-29 06:49:23 Kyle

的setTimeout方法（按其他的答案）是动画基于时间的进步的最常用的方法。

但是我的setTimeout有一个问题，如果速度很快或者我想将条从100％重置为0％，因为默认的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。

来源

2016-04-28 14:09:06 tardate

这应该是被接受的答案 – Volatil3

如何增加引导程序进度条？

回答

相关问题