一、效果
- 原始页面:
- 点击查询后:
- 查询结束后:
二、代码实现
2.1 将内容通过onclick事件提交到go()
<button class="btn btn-dark" type="button" onclick="go()">Go! </button>
被提交内容1:表单数据(省略)
内容2:加载框(id为wait1与wait2的两个块)注意此时两个框状态为 display:none,代表隐藏
<center>
<span id="wait1" class="spinner-border spinner-border-sm" style="display:none"></span>
<span id="wait2" style="display:none"> 正在努力查询中,请稍等!</span>
</center>
2.2 go()函数的处理
<script>
function go() {
var hh1 = document.getElementById("wait1");
var hh2 = document.getElementById("wait2");
if (hh1.style.display == "none" && hh2.style.display == "none") {
hh1.style.display = "inline-block"
hh2.style.display = "inline-block"
}
document.getElementById('go').submit()
}
</script>
①.接受两个span块,并进行条件判断,若状态为隐藏,让它们现身。
注意此时现身需用 inline-block,而不是block。目的让加载框与提示语出现在同一行!
②.将所有数据提交给后端,进行数据处理。
三、附:一段点击切换块隐藏与显示状态的代码
<a href="#" onclick="Change1()">我是链接 快点我</a>
<p id="title-p1" style="display: none">我出现啦</p>
<script>
function Change1() {
var hh1 = document.getElementById("title-p1");
if (hh1.style.display == "" || hh1.style.display == "none") {
hh1.style.display = "block"
} else {
hh1.style.display = "none"
}
}
</script>
原始状态:
点击一次:
点击第二次: