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

Question

I am trying to make an automatically loading progress bar with a redirect when it reaches 100% only thing is the <body onload="move()"> tag and the <form action="home.html"> tag do not work well together anyone know how to fix this? 我试图通过重定向使自动加载进度栏达到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>

Answer 1

You need a independent timer for the redirect (so it will not be blocked). 您需要一个独立的计时器进行重定向（因此不会被阻止）。

Add this on the end of the move() function: 将其添加到move（）函数的末尾：

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

Answer 2

i have do a bar with auto speed increase too simple: 我有一个自动速度增加的酒吧太简单了：

 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>

Answer 3

If you wanna use jQuery, you can use ProgressBar from jQueryUI and redirect your page in this way . 如果您想使用jQuery，则可以使用jQueryUI中的ProgressBar并以这种方式重定向页面。

BTW you can see the whole stuff in jsfiddle! 顺便说一句，您可以在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>

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

问题描述

3 个解决方案

解决方案1
1 2017-01-01 17:47:25

解决方案2
1 2017-05-05 19:30:40

解决方案3
0 2017-01-01 18:15:18

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

问题描述

3 个解决方案

解决方案1 1 2017-01-01 17:47:25

解决方案2 1 2017-05-05 19:30:40

解决方案3 0 2017-01-01 18:15:18

解决方案1
1 2017-01-01 17:47:25

解决方案2
1 2017-05-05 19:30:40

解决方案3
0 2017-01-01 18:15:18