个人中心
gpt4 book ai didi

javascript - 当进度条达到100%时如何重定向url

转载 作者：太空宇宙 更新时间：2023-11-04 15:26:45 25 4
gpt4 key购买 nike

我是使用进度栏重定向页面的新手。当 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>

最佳答案

如果您只想在加载器达到 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';
}

关于javascript - 当进度条达到100%时如何重定向url，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46731123/

25 4 0
文章推荐： javascript - JS : How to determine if font have glyph for character?
文章推荐： javascript - aurelia中绑定(bind)点击事件
文章推荐： javascript - 如何选择素 Angular p树上的所有节点？
文章推荐： javascript - 如果选中复选框，则激活字段
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com