Question

我正尝试在按下按钮时加载微调器。我正在使用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文件的source

Answer 1

setInterval(func|code, [delay])将在延迟包括第一次结束后运行您的代码。为了解决您的问题，我建议您在单击按钮时触发您的微调器功能，并使用setTimeout(func|code, [delay])在X时间后将其停止。 setTimeout的参数与setInterval相同，但是延迟结束后它将运行一次功能/代码。您可以找到更多信息here。

Answer 2

如果.example是微调器容器的类，则只需在用户单击按钮并将其隐藏3秒后将其显示出来即可。

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

从按钮加载微调框

2 个答案: