我想创建一个显示正在加载的页面,然后显示随时间变化的随机数,但是问题是当加载切换到随机数时,该随机数再次变为加载(循环)。
这是我的代码:
<div class="spinner" id="box1">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
<div class="suhu" style="display:none" id="box2">
<span style="color: #E74C3C; font-size: 30px; text-align: center;">
Suhu Anda : </span><span id="decimalgenerate" style="font-size: 30px;"></span><span style="font-size: 30px;">℃<br/></span><span style="color: #E74C3C;"></span>
</div>
这是JS代码:
setInterval(function thing() {
var b1 = document.getElementById('box1');
var b2 = document.getElementById('box2');
if(b1['style'].display == 'none')break; {
b1['style'].display = 'block';
b2['style'].display = 'none';
} else {
b1['style'].display = 'none';
b2['style'].display = 'block';
}
}, 7000);
最佳答案
对于停止间隔,请使用clearInterval
var myTime = setInterval(function thing() {
var b1 = document.getElementById('box1');
var b2 = document.getElementById('box2');
if(b1['style'].display == 'none')break; {
b1['style'].display = 'block';
b2['style'].display = 'none';
} else {
b1['style'].display = 'none';
b2['style'].display = 'block';
}
}, 7000);
和你想要的地方
clearInterval(myTime)
例:
var myTime = setInterval(function thing() {
var b1 = document.getElementById('box1');
var b2 = document.getElementById('box2');
if(b1['style'].display == 'none') {
b1['style'].display = 'block';
b2['style'].display = 'none';
clearInterval(myTime);
} else {
b1['style'].display = 'none';
b2['style'].display = 'block';
}
}, 7000);