Question

我构建了一个Spinner并使用CSS对其进行了动画处理，现在我试图隐藏该Spinner并在单击按钮时显示它。到目前为止，我已经编写了这段代码，当我单击提交 <button>

时，该代码没有显示

我用display：none隐藏了微调框，并尝试使用JavaScript将 <div> 更改为 display:block ，但是没有工作。

CSS：

* {
margin: 0;
padding: 0;
}

.loader {
   display: none;
   top: 50%;
   left: 50%;
   position: absolute;
   transform: translate(-50%, -50%);
}

.loading {
   border: 2px solid #ccc;
   width: 60px;
   height: 60px;
   border-radius: 50%;
   border-top-color: #1ecd97;
   border-left-color:  #1ecd97;
   animation: spin 1s infinite ease-in;
}

@keyframes spin {
   0% {
       transform: rotate(0deg);
   }
   100% {
       transform: rotate(360deg);
   }
}

JavaScript：

 function spinner() {
 document.getElementsByClassName("loader").style.display = "block";
 }

HTML：

<button type="submit" class="sbtn btn btn-secondary btn-c" 
onclick="spinner()" >Log in</button>

我是 Javascript 的新手，所以我想在这里可以找到一些建议。

Answer 1

如果要向微调框添加样式，则必须获取函数getElementsByClassName返回的第一个元素。

getElementsByClassName返回带有该特定类的元素的列表。

getElementById返回一个具有给定ID的元素。

在您的情况下，我很想为加载程序提供一个ID，然后执行getElementById。但是，如果您想使用getElementsByClassName，则可以执行以下操作：

document.getElementsByClassName("loader")[0].style.display = "block";

这是一个工作中的纺锤：

* {
  margin: 0;
  padding: 0;
}

.loader {
  display: none;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}

.loading {
  border: 2px solid #ccc;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border-top-color: #1ecd97;
  border-left-color: #1ecd97;
  animation: spin 1s infinite ease-in;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

<button type="submit" class="sbtn btn btn-secondary btn-c" onclick="spinner()">Log in</button>
<div class="loader">
  <div class="loading">
  </div>
</div>


<script type="text/javascript">
    function spinner() {
        document.getElementsByClassName("loader")[0].style.display = "block";
    }
</script>

Answer 2

您没有让我们知道要在哪里添加微调器，所以我创建了<div>，其中将包含微调器的动画，如下所示：

HTML：

<button type="submit" id="btn" class="sbtn btn btn-secondary btn-c">Log in</button>

<div class='spinner-displayer'></div>

CSS：

* {
  margin: 0;
  padding: 0;
}

.loader {
  display: none;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}

.loading {
  border: 2px solid #ccc;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border-top-color: #1ecd97;
  border-left-color:  #1ecd97;
  animation: spin 1s infinite ease-in;
}

@keyframes spin {
  0% {
      transform: rotate(0deg);
  }
  100% {
      transform: rotate(360deg);
  }
}

JavaScript：

function spinner() {
    const spinnerDisplayer = document.querySelector('.spinner-displayer');
    const btn = document.getElementById('btn');

    btn.addEventListener('click', () => {
    spinnerDisplayer.classList.add('loading');
  })
}

spinner();

选中此 working code sample 。

我建议您不要在 HTML ， inline event handlers 上使用 it's a bad idea 。

Answer 3

尝试这种方法https://codepen.io/jmalatia/pen/HkmaA

<div style="margin:3em;">
<button type="button" class="btn btn-primary btn-lg " id="load" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> Processing Order">Submit Order</button>
<br>
  <br>
<button type="button" class="btn btn-primary btn-lg" id="load" data-loading-text="<i class='fa fa-spinner fa-spin '></i> Processing Order">Submit Order</button>



$('.btn').on('click', function() {
    var $this = $(this);
  $this.button('loading');
    setTimeout(function() {
       $this.button('reset');
   }, 8000);
});

</div>

Answer 4

没有完整的html代码，很难解释loader类的作用。

<div id="spinner" class="loading">
</div>
<button type="submit" class="sbtn btn btn-secondary btn-c" 
onclick="spinner()" >Log in</button>


<style type="text/css">

    #spinner {
        display: none;
    }

    .loading {
        border: 2px solid #ccc;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border-top-color: #1ecd97;
        border-left-color: #1ecd97;
        animation: spin 1s infinite ease-in;
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
</style>

<script type="text/javascript">
    function spinner() {
        document.getElementById("spinner").style.display = "block";
    }
</script>

此方法有效，我已将#spinner的ID添加到您的微调器图像中，并且不显示任何ID。然后在按钮上单击以将其设置为阻止状态。

显示微调器onclick

4 个答案: