[英]Progress bar with duration and percentage
我想创建一个具有持续时间(完成动画所需的时间)和百分比的进度条。
所以我希望这个进度条需要 3000 毫秒才能完成(达到 100%):
迄今为止 :
<div id="box"></div>
<script>
function start(){
var duration = 5000; // it should finish in 5 seconds !
var max = 100;
var i = 0 ;
var interval = setInterval(function(){
i++;
offset = (max*i)/duration;
console.log(offset);
$("#box").css("width", offset + "px");
$("#box").text(parseInt(offset) + "%");
if(i>=duration){
alert("done "+i);
clearInterval(interval);
}
}, 1);
}
</script>
它有效,但需要更长的时间 5000ms 。
我还添加了 Jquery 标签,因为我不在乎我是使用 javascript 还是 jquery
谢谢你们。
根据需要随意调整以下内容,但主要问题已得到修复。 也就是说,您的间隔不应每 1 毫秒运行一次,而应以 100% 完成。 下面将设置您的时间间隔始终以每 1% 运行一次。
function start(){
var duration = 5000; // it should finish in 5 seconds !
var percent = duration / 100; // 1 percent of duration
var i = 0 ;
var interval = setInterval(function(){
i++;
$("#box").css("width", i + "px");
$("#box").text(i + "%");
if(i>=100){
alert("done");
clearInterval(interval);
}
}, percent);
}
最简单的解决方案可能是使用 jQuery 的.animate()
function start() { var duration = 5000; // it should finish in 5 seconds ! $("#box").stop().css("width", 0).animate({ width: 100 }, { duration: duration, progress: function(promise, progress, ms) { $(this).text(Math.round(progress * 100) + '%'); } }); } start()
#box { border: 1px solid red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="box"></div>
另一个解决方案是查看时差
function start() { var duration = 5000; // it should finish in 5 seconds ! var st = new Date().getTime(); var interval = setInterval(function() { var diff = Math.round(new Date().getTime() - st), val = Math.round(diff / duration * 100); val = val > 100 ? 100 : val; $("#box").css("width", val + "px"); $("#box").text(val + "%"); if (diff >= duration) { clearInterval(interval); } }, 100); } start()
#box { border: 1px solid red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="box"></div>
function start() { var duration = 5000; // it should finish in 5 seconds ! var st = window.performance.now(); window.requestAnimationFrame(function step(time) { var diff = Math.round(time - st), val = Math.round(diff / duration * 100); val = val > 100 ? 100 : val; $("#box").css("width", val + "px"); $("#box").text(val + "%"); if (diff < duration) { window.requestAnimationFrame(step); } }) } start()
#box { border: 1px solid red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="box"></div>
不确定你是否正在使用它,但你可以引导来做到这一点。
<div class="progress-bar" style="width: 0;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" >
var value = 0;
function start(){
value += 5;
$( ".progress-bar" ).css("width", value+"%").attr("aria-valuenow", value);
if ( value%5 == 0 ) {
return setTimeout(restart, 100);
}
if(value >= 100)
return;
else
setTimeout(restart, 50);
}
function restart() {
start();
}
我使用了你们中的一些人提供的答案,但您在进度条上弄错了一件事。 您需要将 jquery 中的“px”更改为“%”,否则进度条将只有 100px 宽。 由于我使用的是 Bootstrap 进度条,此处的值会修改为已经存在的值,并在页面加载时填充进度包装器。
function start() {
var duration = 5000; // it should finish in 5 seconds !
var st = window.performance.now();
window.requestAnimationFrame(function step(time) {
var diff = Math.round(time - st),
val = Math.round(diff / duration * 100);
val = val > 100 ? 100 : val;
$(".progress-bar").css("width", val + "%");
$(".progress-bar").text(val + "%");
if (diff < duration) {
window.requestAnimationFrame(step);
}
})
}
start()
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.