我希望创建一个具有持续时间(完成动画所需的时间)和百分比的进度条。
因此,我希望此进度条需要3000ms才能完成(达到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>
它可以工作,但它需要比5000毫秒更长的时间。
我还添加了Jquery标签,因为我不在乎使用JavaScript还是jQuery。
谢谢大家。