Question

我制作的代码只显示一个div 并在x秒后自动隐藏div 它只是第一次工作之后 .................... 这是代码

<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>

Answer 1

使用setInterval代替setTimeout

例如：

setInterval(function(){ hidediv('newboxes1');}, 4000);
setInterval(function(){ hidediv('newboxes2');}, 4000);
setInterval(function(){ hidediv('newboxes3');}, 4000);

Answer 2

更好的调试代码。你可以为firefox安装firebug。它是查找JS错误的一个非常好的工具。

2秒后自动隐藏div

2 个答案: