Question

我有一个输入。让我们获取该代码

<div id="demo2"></div>

<script type="text/javascript">
	
function myFun() {
 var a = document.getElementById("demo").value ;
 document.getElementById("demo2").innerHTML = a ;
}


</script>
<input type="text" id="demo"/>
<button onclick="myFun()">Click Me </button>

现在，我希望当用户单击按钮时，将需要5到6秒钟来显示输入的值，并且这时加载微调器将加载任何人可以帮助我？

Answer 1

很简单。您可以执行以下操作：

    var buttonElem = document.querySelector('.button');
    
    buttonElem.addEventListener("click", function() {
      buttonElem.classList.add('spinning');
 
      setTimeout( 
            function  (){  
                buttonElem.classList.remove('spinning');
          
            }, 6000);
    }, false);

.button {
  display: inline-block;
  outline: none;
  padding: 10px 20px;
  background: #444;
  border-radius: 4px;
  color: #fff;
  border: 0;
  position: relative;
  transition: padding-right 0.3s ease;
  box-shadow: 0 1px 0 #6e6e6e inset, 0px 1px 0 #3b3b3b;
}
.button.spinning {
  padding-right: 40px;
}
.button.spinning:after {
  content: "";
  right: 6px;
  top: 50%;
  width: 0;
  height: 0;
  position: absolute;
  border-radius: 50%;
  -webkit-animation: rotate360 0.5s infinite linear, exist 0.1s forwards ease;
          animation: rotate360 0.5s infinite linear, exist 0.1s forwards ease;
}
.button.spinning:before {
  content: "";
  width: 0px;
  height: 0px;
  border-radius: 50%;
  right: 6px;
  top: 50%;
  position: absolute;
  border: 2px solid #000000;
  border-right: 3px solid #27ae60;
  -webkit-animation: rotate360 0.5s infinite linear, exist 0.1s forwards ease;
          animation: rotate360 0.5s infinite linear, exist 0.1s forwards ease;
}
@-webkit-keyframes rotate360 {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes exist {
  100% {
    width: 15px;
    height: 15px;
    margin: -8px 5px 0 0;
  }
}
@keyframes exist {
  100% {
    width: 15px;
    height: 15px;
    margin: -8px 5px 0 0;
  }
}

<button class="button">Click Me</button>

Answer 2

波纹管代码将帮助您，在显示内容之前加载微调器，并在准备显示内容时将其移除。

function myFun() {
  var a = document.getElementById("demo").value;
  document.getElementById("demo2").innerHTML = "";
  document.getElementById("demo2").classList.add("loader");
  setTimeout(function() {
    document.getElementById("demo2").classList.remove("loader");
    document.getElementById("demo2").innerHTML = a;
  }, 2000);
}

.loader {
  border: 6px solid #f3f3f3;
  border-radius: 50%;
  border-top: 6px solid #3498db;
  width: 20px;
  height: 20px;
  -webkit-animation: spin 2s linear infinite;
  /* Safari */
  animation: spin 2s linear infinite;
}


/* Safari */

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<div id="demo2"></div>

<input type="text" id="demo" />
<button onclick="myFun()">Click Me </button>

Answer 3

这是可以在页面中间使用微调器的另一个示例并同时使用两个功能

<!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    /* Center the loader*/
    .loader {    
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 1;
      width: 150px;
      height: 150px;
      margin: -75px 0 0 -75px;
      border: 16px solid #f3f3f3;
      border-radius: 50%;
      border-top: 16px solid blue;
      width: 120px;
      height: 120px;
    
      border-right: 16px solid green;
      border-bottom: 16px solid red;
      -webkit-animation: spin 2s linear infinite;
      animation: spin 2s linear infinite;
    }
    
    @-webkit-keyframes spin {
      0% { -webkit-transform: rotate(0deg); }
      100% { -webkit-transform: rotate(360deg); }
    }
    
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
    
    
    
    </style>
    </head>
    <body>
    
      <div id="demo2"></div>
    
      <input type="text" id="demo"/>
      <button onclick="myFunction()">Click Me </button>
    
    <script>
    var myVar;
    function myFunction() {
    
      myVar = document.getElementById("demo").value;
      document.getElementById("demo2").innerHTML = "";
      document.getElementById("demo2").classList.add("loader");
         setTimeout(showPage, 3000);
    
    }
    
    function showPage() {
    
        document.getElementById("demo2").classList.remove("loader");
        document.getElementById("demo2").innerHTML = myVar;
        document.getElementById("demo").value = "";
    
    }
    </script>
    
    </body>
    </html>

如何在按钮onlick上添加加载微调器

3 个答案: