Загрузка счетчика с кнопки - PullRequest
Новая
       20

Загрузка счетчика с кнопки

0 голосов
/ 19 июня 2020

Я пытаюсь загрузить спиннер, как только нажимается кнопка. Я использую библиотеку Spinkit. Цель состоит в том, чтобы отображать счетчик в течение примерно 3 секунд ПОСЛЕ нажатия кнопки, непосредственно перед загрузкой страницы. Но до показа прядильщика не требуется и секунды. Пожалуйста, посмотрите: 

  <!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="spinkit.min.css">
    <style>
        .example  {
            margin: 50px 100px;
            padding: 100px; 
            border-bottom: 1px solid #eee;
            display: none; 
                    }
         .sk-plane {
              height: 50px;
              background-color: darkviolet;
      }
    </style> 
    <script>


     function spp(){

         let spi = setInterval(spiny, 3000);
     };    
        spp();

      function spiny(){

         let showie = document.querySelector('.example');
          showie.style.display = 'block';

          };
        </script>

    </head>
<body>

    <button class='tay' onclick='spiny()'>
        <a href="#" > Press Here </a>          
      </button>



        <center class="example">
            <button class="sk-plane"> </button>
           </center>




</body>
</html>

Вот исходный текст файла Spinkit

Ответы [ 2 ]

1 голос
/ 19 июня 2020

setInterval(func|code, [delay]) запустит ваш код по истечении задержки , включая первый раз . Чтобы решить вашу проблему, я бы посоветовал запускать функцию прядильщика при нажатии кнопки и с помощью setTimeout(func|code, [delay]) останавливать ее через X времени. setTimeout принимает те же параметры, что и setInterval, но запускает функцию / код один раз, когда задержка закончилась. Вы можете найти больше информации здесь .

0 голосов
/ 19 июня 2020

если .example - это класс контейнера счетчика, вам просто нужно показать это, когда пользователь нажимает кнопку и скрывает ее через 3 секунды: 

function spiny(){
    let spinner = document.querySelector('.example');
    spinner.style.display = 'block';
    setTimeout(() => {
        spinner.style.display = 'none';
    }, 3000);
}
...