如何使自动加载进度栏重定向？

我试图做一个自动加载进度条，当它达到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>

来源

2017-01-01 Chris

1.您还没有关闭了'body'和'form'标签呢。 2.你在哪里使用“表单”。 3'form'应该放在'body'里面 –

并使用匿名函数：'var id; window.onload = function（）{ var elem = document.getElementById（“myBar”）; var width = 10; ID = setInterval的（函数（）{ 如果（宽度> = 100）{ clearInterval（ID）; }否则{ 宽度++; elem.style.width =宽度+ '％'; 的document.getElementById（”标签“）innerHTML = width * 1 +'％'; } }，100） } – mplungjan

你需要一个独立的重定向计时器（所以它不会被阻止）。

添加这个上移（）函数的末尾：

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

来源

2017-01-01 17:47:25 MaanooAk

如果你想使用jQuery，您可以使用从jQueryUI的ProgressBar和this way重定向页面。

顺便说一句，你可以在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>

来源

2017-01-01 18:15:18 JustCauseWhat

我有做汽车的速度增加酒吧太简单了：

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>

来源

2017-05-05 19:30:40

如何使自动加载进度栏重定向？

回答

相关问题