Как поставить загрузчик б * с jQuery - PullRequest
Новая
       28

Как поставить загрузчик б * с jQuery

0 голосов
/ 27 марта 2020

Я создал анимацию, которая будет использоваться для загрузки анимации, например, когда страница загружается, когда пользователь нажимает кнопку, отправляет форму и т. Д. c. В этом примере в следующем коде мне хотелось бы, чтобы, когда пользователи нажимали кнопку, страница перенаправлялась на эту анимацию загрузки, а затем, после завершения анимации, через несколько секунд открывался новый файл, то есть страница. для ввода, который набрал пользователь. Вот код: 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="text.css" type="text/css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
    <input type="text">
    <button>Click</button>

    <script>
        $(document).ready(function(){


            $('input').keyup(function(){
                if($('input').val() === 'New York'){
                    $('button').click(function(){
                        window.location.href = "newyork.html";
                    });
                } else if($('input').val() === 'New Jersey'){
                    $('button').click(function(){
                        window.location.href = "newjersey.html";
                    });
                }
            });

        });


    </script>
</body>
</html>

Здесь я использовал jQuery. Когда пользователь нажимает кнопку, я хочу, чтобы эта страница перенаправляла пользователя на указанную c страницу, которая была бы результатом того, что пользователь ввел. В этом примере, если пользователь ввел New York во ввод, я хотел бы, чтобы страница перенаправляла в файл newyork. html. Но, прежде чем он это сделает, я сначала сделаю анимацию загрузки, а затем появится этот новый файл. Вот код для загрузчика: 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
   body{
            background-color: rgba(60, 70, 255, 0.3);
        }
  .boat img{
                width: 90px;
                position: absolute;
                top: 50%;
                right: 20%;
                animation: boat 3s 1s infinite ease;
                z-index: 10;
            }

            @keyframes boat{
            from{right: 20%;}
            to{right: 65%;}
            }
        }
</style>
</head>
<body>

     <div class="boat">
        <img src="http://www.myiconfinder.com/uploads/iconsets/128-128-d8d329b704d34cf035a25811e32ba733-boat.png">
    </div>

</body>
</html>

Я сделал три отдельных файла: загрузчик, страницу ввода и страницу вывода.

...