进度条达到100％时如何重定向url

时间：2017-10-13 13:28:51

标签： javascript html progress-bar url-redirection

我是使用进度条重定向页面的新手。当在5秒内未达到计时器时，进度条会反复继续，除非计时器达到5秒，否则它将重定向到另一页。当进度条达到100％时进行采样但是计时器在4秒内它将循环回到1％，依此类推，所以当计时器达到5秒时它将停止在38％或者什么。我应该用什么代码才能正常工作？

任何意见和建议都会非常感激。请为我的英语不好。

var worker = null;
var loaded = 0;

function increment() {
    $('#counter').html(loaded+'%');
    $('#drink').css('top', (100-loaded*.9)+'%');
    if(loaded==25) $('#cubes div:nth-child(1)').fadeIn(100);
    if(loaded==50) $('#cubes div:nth-child(2)').fadeIn(100);
    if(loaded==75) $('#cubes div:nth-child(3)').fadeIn(100);
    if(loaded==100) {
        $('#lemon').fadeIn(100);
        $('#straw').fadeIn(300);
        loaded = 0;
        stopLoading();
        setTimeout(startLoading, 1000);
    }
    else loaded++;    
}
function startLoading() {
    $('#lemon').hide();
    $('#straw').hide();
    $('#cubes div').hide();
    worker = setInterval(increment, 30);
}
function stopLoading() {
    clearInterval(worker);
}
startLoading();
* { box-sizing: border-box; }
html { height: 100%; }
body {
    position: relative;
    margin: 0;
    height: 100%;
    background: linear-gradient(steelblue, beige);
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    text-align: center;
}
#loader {
    position: absolute;
    top:50%; left:50%;
    height:200px; width:100px;
    margin-top:-100px; margin-left:-50px;
}
#glass {
    position: relative;
    height: 100%;
    background: rgba(255,255,255,.1);
    border-radius: 0% 0% 15% 15%;
    border: 3px solid;
    border-top: 0;
    border-bottom: 20px solid;
    border-color: rgba(255,255,255,.7);
    overflow: hidden;
}
#drink {
    position: absolute;
    top:100%; right:0; bottom:0; left:0;
    background: linear-gradient(to bottom, orange, orangered);
    box-shadow: inset 0 2px 1px rgba(255,69,0,.2);
    opacity: .7;
}
#counter {
    position: relative;
    line-height: 200px;
    font-size: 22px;
    color: rgba(255,255,255,1);
}
#lemon {
    display: none;
    position: absolute;
    top:0; right:0;
    height:79px; width:79px;
    margin-top:-38px; margin-right:-38px;
    background: radial-gradient(#f7f3b6 10%, #d7d26c);
    border-radius: 50%;
    border: 4px solid #47582e;
    box-shadow: inset 0 0 0 2px #f7f3b6;
}
#straw {
    display: none;
    position: absolute;
    bottom:20px; right:30%;
    height:220px; width:6px;
    background: steelblue;
    border-radius: 0 6px 0 0;
    transform: rotate(-18.5deg);
    transform-origin: left bottom;
    -webkit-transform: rotate(-18.5deg);
    -webkit-transform-origin: left bottom;
}
#straw:after {
    content: '';
    position: absolute;
    top:0; right:0;
    height:6px; width:80px;
    background: inherit;
    border-radius: 0 6px 0 0;
}
#cubes {
    position: absolute;
    top:0; right:0; bottom:0; left:0;
}
#cubes div {
    /*display: none;*/
    position: absolute;
    width:50px; height:50px;
    background: rgba(255,255,255,.3);
    border-radius: 10px;
    box-shadow: inset 0 0 10px rgba(255,255,255,.6);
}
#cubes div:nth-child(1) {
    bottom:0;
}
#cubes div:nth-child(2) {
    bottom:45px; left:25px;
    transform: rotate(32deg);
    transform-origin: center bottom;
    -webkit-transform: rotate(32deg);
    -webkit-transform-origin: center bottom;
}
#cubes div:nth-child(3) {
    bottom:90px; left:20px;
    transform: rotate(-34deg);
    transform-origin: center bottom;
    -webkit-transform: rotate(-34deg);
    -webkit-transform-origin: center bottom;
}
#coaster {
    width: 130%; height: 4px;
    margin-left: -15%;
    background: steelblue;
    border-radius: 2px;
}
footer {
    position: absolute;
    left:0; top:50%; right:0;
    margin-top: 120px;
    color: steelblue;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <link href='https://fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'/>
    <link rel="stylesheet" type="text/css" href="css/animation.css">
  </head>
      <body>
        <?php
         header("refresh:5; url=https://stackoverflow.com/");
        ?>
        <div id="loader">
          <div id="lemon"></div>
            <div id="straw"></div>
              <div id="glass">
                <div id="cubes"></div>
                  <div id="drink"></div>
                    <span id="counter"></span>
              </div>
                      <div id="coaster"></div>
          </div>
        <footer>Please wait while<br>we fill up your glass...</footer>
      </body>
</html>

3 个答案:

答案 0 :(得分：1)

如果您想要的是在加载程序达到100％时重定向页面，那么将window.location赋值添加到最终检查'loaded'的值：

if(loaded==100) {
    $('#lemon').fadeIn(100);
    $('#straw').fadeIn(300);
    loaded = 0;
    stopLoading();
    // VVV you don't really need to do this
   //  setTimeout(startLoading, 1000);
   window.location.href = 'http://stackoverflow.com';
}

答案 1 :(得分：0)

对于重定向， 使用HttpResponse对象作为 如果（的document.getElementById（进度）。价值= 100）  Response.Redirect的（URL） 希望它有效！

答案 2 :(得分：0)

请找到所需输出的修改代码：

（5秒后，页面将被重定向，进度条即使小于100也会移动到100％。）

var worker = null;
var loaded = 0;

function increment() {
    $('#counter').html(loaded+'%');
    $('#drink').css('top', (100-loaded*.9)+'%');
    if(loaded==25) $('#cubes div:nth-child(1)').fadeIn(100);
    if(loaded==50) $('#cubes div:nth-child(2)').fadeIn(100);
    if(loaded==75) $('#cubes div:nth-child(3)').fadeIn(100);
    if(loaded==100) {
        $('#lemon').fadeIn(100);
        $('#straw').fadeIn(300);
        loaded = 0;
        stopLoading();
        setTimeout(startLoading, 1000);
    }
    else loaded++;    
}
function startLoading() {
    $('#lemon').hide();
    $('#straw').hide();
    $('#cubes div').hide();
    worker = setInterval(increment, 30);
}
function stopLoading() {
     clearInterval(worker);
}
 function redirectAfter5Sec(){
     setTimeout(redirectMe, 5000);
}
 function redirectMe(){
      $('#counter').html('100%');
      $('#drink').css('top', (100-100*.9)+'%');
      clearInterval(worker);
      window.location.href="http://stackoverflow.com";

}
startLoading();
redirectAfter5Sec();
* { box-sizing: border-box; }
html { height: 100%; }
body {
    position: relative;
    margin: 0;
    height: 100%;
    background: linear-gradient(steelblue, beige);
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    text-align: center;
}
#loader {
    position: absolute;
    top:50%; left:50%;
    height:200px; width:100px;
    margin-top:-100px; margin-left:-50px;
}
#glass {
    position: relative;
    height: 100%;
    background: rgba(255,255,255,.1);
    border-radius: 0% 0% 15% 15%;
    border: 3px solid;
    border-top: 0;
    border-bottom: 20px solid;
    border-color: rgba(255,255,255,.7);
    overflow: hidden;
}
#drink {
    position: absolute;
    top:100%; right:0; bottom:0; left:0;
    background: linear-gradient(to bottom, orange, orangered);
    box-shadow: inset 0 2px 1px rgba(255,69,0,.2);
    opacity: .7;
}
#counter {
    position: relative;
    line-height: 200px;
    font-size: 22px;
    color: rgba(255,255,255,1);
}
#lemon {
    display: none;
    position: absolute;
    top:0; right:0;
    height:79px; width:79px;
    margin-top:-38px; margin-right:-38px;
    background: radial-gradient(#f7f3b6 10%, #d7d26c);
    border-radius: 50%;
    border: 4px solid #47582e;
    box-shadow: inset 0 0 0 2px #f7f3b6;
}
#straw {
    display: none;
    position: absolute;
    bottom:20px; right:30%;
    height:220px; width:6px;
    background: steelblue;
    border-radius: 0 6px 0 0;
    transform: rotate(-18.5deg);
    transform-origin: left bottom;
    -webkit-transform: rotate(-18.5deg);
    -webkit-transform-origin: left bottom;
}
#straw:after {
    content: '';
    position: absolute;
    top:0; right:0;
    height:6px; width:80px;
    background: inherit;
    border-radius: 0 6px 0 0;
}
#cubes {
    position: absolute;
    top:0; right:0; bottom:0; left:0;
}
#cubes div {
    /*display: none;*/
    position: absolute;
    width:50px; height:50px;
    background: rgba(255,255,255,.3);
    border-radius: 10px;
    box-shadow: inset 0 0 10px rgba(255,255,255,.6);
}
#cubes div:nth-child(1) {
    bottom:0;
}
#cubes div:nth-child(2) {
    bottom:45px; left:25px;
    transform: rotate(32deg);
    transform-origin: center bottom;
    -webkit-transform: rotate(32deg);
    -webkit-transform-origin: center bottom;
}
#cubes div:nth-child(3) {
    bottom:90px; left:20px;
    transform: rotate(-34deg);
    transform-origin: center bottom;
    -webkit-transform: rotate(-34deg);
    -webkit-transform-origin: center bottom;
}
#coaster {
    width: 130%; height: 4px;
    margin-left: -15%;
    background: steelblue;
    border-radius: 2px;
}
footer {
    position: absolute;
    left:0; top:50%; right:0;
    margin-top: 120px;
    color: steelblue;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <link href='https://fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'/>
    <link rel="stylesheet" type="text/css" href="css/animation.css">
  </head>
      <body>
        <?php
         header("refresh:5; url=https://stackoverflow.com/");
        ?>
        <div id="loader">
          <div id="lemon"></div>
            <div id="straw"></div>
              <div id="glass">
                <div id="cubes"></div>
                  <div id="drink"></div>
                    <span id="counter"></span>
              </div>
                      <div id="coaster"></div>
          </div>
        <footer>Please wait while<br>we fill up your glass...</footer>
      </body>
</html>

相关问题
最新问题