我构建了一个微调器并使用 CSS 对其进行了动画处理,现在我尝试隐藏微调器并在单击按钮时显示它。到目前为止,我已经编写了这段代码,当我单击提交时它没有显示<button>
我用 display:none 隐藏了微调器,并尝试使用 JavaScript 来更改<div>
to 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 https://developer.mozilla.org/en-US/docs/Web/JavaScript所以我想我会在这里得到一些指示。
如果您想向微调器添加样式,则必须获取该函数返回的第一个元素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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)