2秒后自动隐藏div [英] auto hide div after 2 seconds
本文介绍了2秒后自动隐藏div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我做了一个代码，只显示一个div
并在x秒后自动隐藏div
它在第一次工作后只有
......... ...........
这里是代码
< script type =text / JavaScript的>
函数showonlyone（thechosenone）{
var newboxes = document.getElementsByTagName（div）;
for（var x = 0; x
if（name =='newboxes'）{
if（newboxes [x] .id == thechosenone）{
newboxes [x] .style.display ='block';
}
else {
newboxes [x] .style.display ='none';
$ b function hidediv（arg）{
document.getElementById（arg）.style.display ='none';
}
setTimeout（hidediv（'newboxes1'），4000）;
setTimeout（hidediv（'newboxes2'），4000）;
setTimeout（hidediv（'newboxes3'），4000）;
< / script>
< div style =float：left; padding-left：5px; padding-right：5px; >
< div style =border：1px solid blue; background-color：＃99CCFF; padding：5px;>
< a id =myHeader1href =javascript：showonlyone（'newboxes1'）; >崩< / A>
< / div>
< div name =newboxesid =newboxes1style =border：1px solid black; background-color：#CCCCCC; display：none; padding：5px;> Div＃1< / div> ;
< / div>
< div style =float：left; padding-left：5px; padding-right：5px; >
< div style =border：1px solid blue; background-color：＃99CCFF; padding：5px;>
< a id =myHeader2href =javascript：showonlyone（'newboxes2'）; >崩< / A>
< / div>
< div name =newboxesid =newboxes2style =border：1px solid black; background-color：#CCCCCC; display：none; padding：5px;> Div＃2< / div
< / div>
< div style =float：left; padding-left：5px; padding-right：5px; >
< div style =border：1px solid blue; background-color：＃99CCFF; padding：5px;>
< / div>
< div name =newboxesid =newboxes3style =border：1px solid black; background-color：#CCCCCC; display：none; padding：5px;> Div＃3< / div
< / div>
解决方案使用
setInterval 代替 setTimeout 例：
setInterval（function（）{hidediv（'newboxes1'）;}，4000）;
setInterval（function（）{hidediv（'newboxes2'）;}，4000）;
setInterval（function（）{hidediv（'newboxes3'）;}，4000）;
i made a code to only show one div and auto hide the div after x seconds it worked for the first time only after that .................... here is the code
<script type="text/javascript">
function showonlyone(thechosenone) {
var newboxes = document.getElementsByTagName("div");
for(var x=0; x<newboxes.length; x++) {
name = newboxes[x].getAttribute("name");
if (name == 'newboxes') {
if (newboxes[x].id == thechosenone) {
newboxes[x].style.display = 'block';
}
else {
newboxes[x].style.display = 'none';
}
}
}
}
function hidediv(arg) {
document.getElementById(arg).style.display = 'none';
}
setTimeout("hidediv('newboxes1')", 4000);
setTimeout("hidediv('newboxes2')", 4000);
setTimeout("hidediv('newboxes3')", 4000);
</script>
<div style="float:left;padding-left:5px;padding-right:5px;" >
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
<a id="myHeader1" href="javascript:showonlyone('newboxes1');" >collapse</a>
</div>
<div name="newboxes" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #1</div>
</div>
<div style="float:left;padding-left:5px;padding-right:5px;" >
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
<a id="myHeader2" href="javascript:showonlyone('newboxes2');" >collapse</a>
</div>
<div name="newboxes" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #2</div
</div>
<div style="float:left;padding-left:5px;padding-right:5px;" >
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
<a id="myHeader3" href="javascript:showonlyone('newboxes3');" >collapse</a>
</div>
<div name="newboxes" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #3</div
</div>
解决方案
use setInterval instead of setTimeout
ex:
setInterval(function(){ hidediv('newboxes1');}, 4000);
setInterval(function(){ hidediv('newboxes2');}, 4000);
setInterval(function(){ hidediv('newboxes3');}, 4000);
这篇关于2秒后自动隐藏div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
