如何添加進度欄延遲

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 個解決方案

解決方案1
3 已采納 2014-02-14 08:31:31

解決方案2
1 2014-02-14 08:33:18

解決方案3
0 2014-02-14 08:35:07

解決方案4
0 2014-02-14 08:38:32

如何添加進度欄延遲

問題描述

4 個解決方案

解決方案1 3 已采納 2014-02-14 08:31:31

解決方案2 1 2014-02-14 08:33:18

解決方案3 0 2014-02-14 08:35:07

解決方案4 0 2014-02-14 08:38:32

解決方案1
3 已采納 2014-02-14 08:31:31

解決方案2
1 2014-02-14 08:33:18

解決方案3
0 2014-02-14 08:35:07

解決方案4
0 2014-02-14 08:38:32