当按钮被点击时,我想要显示加载指示器(spinners,在此处表现为 Bootstrap 的 spinner 组件)持续3秒钟,然后让它消失。我已经能够让它可见,但无法使其再次隐藏。
以下是根据您的代码修改后的 JavaScript 代码段,以实现这个功能:
// 定义函数来控制加载指示器的显示与隐藏
function toggleLoading(visibilityDurationMillis) {
const loadingElement = document.getElementById('loading');
loadingElement.style.visibility = 'visible';
setTimeout(function() {
loadingElement.style.visibility = 'hidden';
}, visibilityDurationMillis);
}
// 绑定按钮点击事件
document.querySelector('.btn-danger').addEventListener('click', function() {
toggleLoading(3000); // 设置3秒后隐藏
});
HTML 部分保持不变:
<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 d-none" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">