2017-01-01 15 views
1

リダイレクトが100%に達したときに自動的にロードされるプログレスバーを作成しようとしています<body onload="move()">タグと<form action="home.html">タグが一緒にうまく動作しません。自動ロードプログレスバーをリダイレクトする方法は?

<style> 
#myProgress { 
    position: relative; 
    width: 100%; 
    height: 30px; 
    background-color: #ddd; 
} 

#myBar { 
    position: absolute; 
    width: 10%; 
    height: 100%; 
    background-color: #4CAF50; 
} 

#label { 
    text-align: center; 
    line-height: 30px; 
    color: white; 
} 
</style> 
<form action="home.html"> 
<body onload="move()"> 

<div id="myProgress"> 
    <div id="myBar"> 
    <div id="label">10%</div> 
    </div> 
</div> 

<script> 
function move() { 
    var elem = document.getElementById("myBar"); 
    var width = 10; 
    var id = setInterval(frame, 10); 
    function frame() { 
    if (width >= 100) { 
     clearInterval(id); 
    } else { 
     width++; 
     elem.style.width = width + '%'; 
     document.getElementById("label").innerHTML = width * 1 + '%'; 
    } 
    } 
} 
</script> 
+0

1.あなたは 'body'を閉じていないと'form'タグはまだありません。 2.あなたはどこで 'form'を利用していますか? 3 'form'は' body'の中にあるべきです –

+0

そして、匿名関数を使用してください: 'var id; window.onload = function(){ var elem = document.getElementById( "myBar"); var width = 10; ID =のsetInterval(関数(){ IF(幅> = 100){ てclearInterval(ID); }他{ 幅++; elem.style.width =幅+ '%'; のdocument.getElementById(」ラベル ")。innerHTML =幅* 1 + '%'; } }、100) } – mplungjan

答えて

1

リダイレクト用の独立したタイマーが必要です(ブロックされないように)。あなたはjQueryのを使用したい場合は、あなたがjQueryUIからProgressBarを使用してthis wayでページをリダイレクトすることができます

setTimeout(function() { 
    window.location.href = "http://stackoverflow.com"; 
}, 1000); 
0

は移動()関数の最後にこれを追加します。

あなたはjsfiddleで全体のものを見ることができます!

$(function() { 
 
    var progressbar = $("#progressbar"), 
 
     progressLabel = $(".progress-label"); 
 
    
 
    progressbar.progressbar({ 
 
     value: false, 
 
     change: function() { 
 
     progressLabel.text(progressbar.progressbar("value") + "%"); 
 
     }, 
 
     complete: function() { 
 
     var url = "http://www.majidkn.com";  
 
     $(location).attr('href',url); 
 
     } 
 
    }); 
 
    
 
    function progress() { 
 
     var val = progressbar.progressbar("value") || 0; 
 
    
 
     progressbar.progressbar("value", val + 2); 
 
    
 
     if (val < 99) { 
 
     setTimeout(progress, 80); 
 
     } 
 
    } 
 
    
 
    setTimeout(progress, 2000); 
 
    });
.ui-progressbar { 
 
    position: relative; 
 
} 
 
.progress-label { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 4px; 
 
    font-weight: bold; 
 
    text-shadow: 1px 1px 0 #fff; 
 
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<div id="progressbar"> 
 
    <div class="progress-label">Loading...</div> 
 
</div>

1

私は、自動速度の増加 単純すぎるとバーの操作を行います:

body { 
 
    background-position:center top; 
 
    background-image: url("https://www.powned.it/wp-content/uploads/2014/04/alamorte-1024x853.jpg?x28259"); 
 
    } 
 
    .number5{ 
 
    top:310px; 
 
    left: 340px; 
 
    position: absolute; 
 
    font-family:impact; 
 
    font-size:15px; 
 
    width:400px; 
 
    } 
 
    .barr { 
 
    position: absolute; 
 
    top:300px; 
 
    left: 300px; 
 
    height: 20px; 
 
    width: 800px; 
 
    border-radius:20px; 
 
    padding:10px; 
 
    background-image: url("http://www.images.searchpointer.com/steel/8583/4.jpg"); 
 
     
 
     
 
    } 
 
    .but { 
 
    position:relative; 
 
    top:200px; 
 
    left: 500px; 
 
    width: 300px; 
 
    height:40px; 
 
    background-color: lightblue; 
 
    border-radius: 5px; 
 
    color:red; 
 
    }
<progress class="barr" id="progressbar" max="2500" value="0">50</progress><div class="number5" id="number1" value="0">press the button to start loading! 0/2500 part 0/4</div> 
 

 
<button style="display:block" id="divs" class="but" onclick="move()">go on admin page</button> 
 
<script>var progress = document.getElementById("progressbar"); 
 
function move() { 
 
    var number = 0.5; 
 
    number = number + number; 
 
    var a = setInterval(function() { 
 
    progress.value = progress.value + number; 
 
    var parts = 1; 
 
    number = number + 0.01; 
 
    if (progress.value > 850) { 
 
     parts = 2; 
 
    } 
 
    if (progress.value > 1650) { 
 
    parts = 3; 
 
    } 
 
     if (progress.value > 2200) { 
 
    parts = 4; 
 
    } 
 
    var x = document.getElementById("divs"); 
 
    x.style.display = 'none'; 
 
    document.getElementById("number1").innerHTML = "loading asset..." + "(" + progress.value + "/" + progress.max + ")" + "part " + parts + "/4" + "rpm:" + number; 
 
    document.getElementById("number1").style.left = progress.value; 
 
     
 
    if (progress.value == 2500) { 
 
     clearInterval(a); 
 
     alert("you was redirect to admin page") 
 
     window.location.replace("#") 
 

 
    } 
 
    }, 25); 
 
}</script>

関連する問題