小编sli*_*rek的帖子

单击时显示微调器

我构建了一个微调器并使用 CSS 对其进行了动画处理,现在我尝试隐藏微调器并在单击按钮时显示它。到目前为止,我已经编写了这段代码,当我单击提交时它没有显示<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);
   }
}
Run Code Online (Sandbox Code Playgroud)

JavaScript:

 function spinner() {
 document.getElementsByClassName("loader").style.display = "block";
 } …
Run Code Online (Sandbox Code Playgroud)

javascript bootstrap-4

3
推荐指数
1
解决办法
4万
查看次数

标签 统计

bootstrap-4 ×1

javascript ×1