单击按钮时，我希望微调器出现 3 秒，然后消失。我可以让它可见，但我不能再让它隐形了。
function stoploading() {
document.getElementById('loading').style.visibility = 'visible';
}<button class="btn btn-danger d-inline-flex align-items-center" type="button">ATTACK</button>
<div class="col text-white m-5 px-5">
<div id="loading" class="spinner-border text-primary load_icon" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">所以我创建了一个
<button>startLoading()<button onclick="startLoading()">Click</button>
<script>
function startLoading() {
// Make he spinner visible
document.getElementById('loading').style.visibility = 'visible';
// Set a timeout to hide the spinner after 3 seconds
setTimeout(function() {
stopLoading();
}, 3000);
}
function stopLoading() {
// Make the spinner invisible
document.getElementById('loading').style.visibility = 'hidden';
}
</script>
<div class="col text-white m-5 px-5">
<div id="loading" class="spinner-border text-primary load_icon" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>您可以在3秒后应用隐藏样式加载
<button onclick="stoploading()">
ATTACK
</button>
<script>
function stoploading() {
// Make the spinner visible
document.getElementById('loading').style.visibility = 'visible';
// Set a timeout to 3 seconds
setTimeout(function () {
document.getElementById('loading').style.visibility = 'hidden';
}, 3000);
}
</script>
<div class="col text-white m-5 px-5">
<div id="loading" class="spinner-border text-primary load_icon" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
或者你也可以使用 classList.add('visible');和 classList.remove('visible');具有相同的效果
简单易行：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button class="btn btn-danger d-inline-flex align-items-center" onclick="onclickButtonHandler()" type="button">ATTACK</button>
<div id="loadingElement" class="col text-white m-5 px-5">
<div id="loading" class="spinner-border text-primary load_icon" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script>
document.getElementById('loadingElement').style.display = 'none';
function onclickButtonHandler(){
document.getElementById('loadingElement').style.display = 'block';
setTimeout(hideLoading,3000);
}
function hideLoading() {
document.getElementById('loadingElement').style.display = 'none';
}
</script>
</body>
</html>