Question

我有html-5进度条，进度条的值已从JQuery传递。我想延迟进度条以慢慢获得进度值。

现在它正在迅速取得进展。我希望顺利而缓慢地取得进展

我该怎么做？

这是我试过的

代码：

<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
for ( var i = 0; i < 100; i++ ) {
  document.getElementById('MyProgress').value = i; 
}
}),4000;
</script>
</head>
<body>
<progress id="MyProgress" value="0" max="100">
</progress>
</body>
</html>

Answer 1

您应该使用jQuery动画功能，如下所示：http://jsfiddle.net/maximgladkov/H5wXj/

$(document).ready(function(){
    $('#MyProgress').animate({ value: 100 }, 10000);
});

Answer 2

我认为你可能会这样做：

setInterval(function(){
for ( var i = 0; i < 100; i++ ) {
  document.getElementById('MyProgress').value = i; 
}
},4000);

Answer 3

使用setTimeout：

function setProgress(value){
    document.getElementById('MyProgress').value = value;
    if(value<=100){
       setTimeout(function(){
          setProgress(value++);
       },1000);
    }

}

$(document).ready(function(){
       setProgress(1);
});

Answer 4

var count = 1;
function progressBar() {
    if(count > 100) {
        return;
    }
    document.getElementById('MyProgress').value = count++;
    setTimeout(function(){
        progressBar();
    }, 100)

}

如何为进度条添加延迟

4 个答案: