У меня есть индикатор выполнения, но я хочу, чтобы он остановился на 100% и перезагрузил сайт, чтобы перенаправить пользователей на следующий шаг - PullRequest
Новая
       6

У меня есть индикатор выполнения, но я хочу, чтобы он остановился на 100% и перезагрузил сайт, чтобы перенаправить пользователей на следующий шаг

0 голосов
/ 22 декабря 2009

хорошо, как я сказал в заголовке, у меня уже есть рабочий фальшивый индикатор прогресса. 

<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%, он должен был остановиться, а затем перезагрузить / перенаправить пользователя на следующий сайт. ..

Я имею в виду эту идею, но, думаю, ее нужно немного изменить, чтобы применить: Прогрессбар загружается, достигает 100% (это успешно происходит с кодом, приведенным выше), однако, он должен остановиться на 100%. И когда это произойдет, он должен загрузить немедленное перенаправление на следующий сайт.

Надеюсь, все понятно, большое спасибо! Chris

1 Ответ

0 голосов
/ 24 декабря 2009

Ладно, разобрался с поддержкой друга: 

<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, что она <100 </em> с x + = 1 (это позволило мне имитировать плавный эффект JQuery-animateProgressBar). Следующие две строки как раз о самой панели (getElementById ищет CSS-идентификатор с именем 'progressbar', а setTimeout - это время в мс между одним вызовом и другим)

Затем, когда оно больше 100 (иначе, x <100) </em>, таймер очищается и загружается новое местоположение location.href = 'http://siteexample.com/index.html.

Надеюсь, это будет полезно и кому-то еще. Крис (закомментированная переменная y = 5 все еще для тестирования; я пытаюсь создать эффект замедления на панели прогресса.)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...