Question

我正在尝试使用重定向自动加载进度条，当它达到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

您需要一个独立的重定向计时器（因此不会被阻止）。

在move（）函数的末尾添加它：

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

Answer 2

我做了一个自动提速的酒吧太简单了：

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

如果您想使用jQuery，可以使用jQueryUI中的ProgressBar并在this way中重定向您的页面。

顺便说一句，你可以在jsfiddle中看到整个内容！

＆＃13;

  $( 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 );
  } );

＆＃13;

.ui-progressbar {
  position: relative;
}
.progress-label {
  position: absolute;
  left: 50%;
  top: 4px;
  font-weight: bold;
  text-shadow: 1px 1px 0 #fff;
}

＆＃13;

<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>

＆＃13;

如何设置自动加载进度条重定向？

3 个答案: