Question

好吧，正如我在标题中说的那样，我已经有了一个有效的假进度条。

<html>
<head>
    <style type="text/css">
        #progress-bar-wrapper
        {
            width: 500px;
            height: 2px;
        }

        #progress-bar
        {
                background-color: #a1cee8;
                width: 100%;
                height: 100%;
        }
    </style>

    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        $(function() { animateProgressBar() });

        function animateProgressBar()
        {
                $("#progress-bar")
                .css("width", "0%")
                .animate(
                {
                        width: "100%"
                },
                1550, //Speed of loading bar
                animateProgressBar);
        }
    </script>
</head>
<body>
    <div id="progress-bar-wrapper">
        <div id="progress-bar"></div>
    </div>
</body>
</html>

此进度条被放入预加载器站点，我希望它做的是一旦达到100％，它必须停止然后重新加载/重定向用户到下一个网站..

我有这个想法，但我想它必须改变一点才能被应用： Progressbar加载，达到100％（这可以通过上面提供的代码成功发生），但是，它必须停止在100％。当它发生时，它必须立即加载到下一个站点。

希望一切都清楚，非常感谢！克里斯

Answer 1

好的，在朋友的支持下想出来了：

<script type="text/javascript">
var x=0;
//var y=5;
window.onload=progress();

function progress(){
    var timer;

    if(x<100){
        x+=1;
        document.getElementById('progressbar').style.width=x+'%';            
        timer=setTimeout('progress()',-40);
    }else{
        clearTimeout(timer);
        location.href='http://siteexample.com/index.html';
    }
}
</script>

变量x的默认值为0. windows.onload 启动进度，栏根据if-statement ＆lt; 100 填充自身x + = 1（这允许我模仿平滑的JQuery-animateProgressBar效果）。接下来的两行只是条形本身（getElementById查找名为'progressbar'的CSS ID，setTimeout只是一次调用与另一次调用之间的ms时间）

然后，当它大于100 （否则，x <100）时，清除计时器并加载新位置 location.href ='http://siteexample.com/index.html

希望它对其他人也有用。克里斯（注释的var y = 5仍然用于测试;我正在尝试在进度条上创建一个减速效果。）

我有一个进度条，但我希望它停止在100％并重新加载网站以将用户重定向到下一步

1 个答案: