setinterval 如何使用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>具有缓冲效果的可伸缩显隐层</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">

<script language="javascript">
var flag=0;
function f_s(id){
       var obj=document.getElementById(id);
       obj.style.display="block";
       obj.style.height="1px";

       var changeW=function(){
              var obj_h=parseInt(obj.style.height); //以十进制解析 obj.style.height
              if(obj_h<=335){
                     obj.style.height=(obj_h+Math.ceil((335-obj_h)/10))+"px"; //Math.ceil返回大于大于等于(335-obj_h)/10)的最小整数
              }
              else{
              clearInterval(bw1);
              }
       }
       bw1= setInterval(changeW,1);
    if(flag>0){
    clearInterval(bw2);
    }
}
function closeW(id){
   flag++;
       var obj=document.getElementById(id);
       var closeDiv=function(){

        clearInterval(bw1);
              var obj_h=parseInt(obj.style.height);
              if(obj_h>1){
                     obj.style.height=(obj_h-Math.ceil(obj_h)/10)+"px";

              }
              else{
              clearInterval(bw2);
              obj.style.display="none";
              }
       }
      bw2= setInterval(closeDiv,1);
   //alert(flag)
}
function showDiv(){
var ele = document.getElementById("div1");
clearInterval(bw1);
clearInterval(bw2);
ele.style.display = "block";
ele.style.height = 335 + "px";
}
</script>
</head>
<body>

<div onmouseover="f_s('div1')" onmouseout="closeW('div1')" style="position:absolute;background:black;left:200px;top:34px;width:149px;height:35px;"></div>
<div id="div1" onmouseover="showDiv()" onmouseout="closeW('div1')" style="position:absolute;background:aqua;left:200px;overflow:hidden;top:70px;width:349px;display:none;">
dfsdfsdf 我是
</div>
</body>
</html>
这是一个js控制div层的页面，谁能给我讲讲这段代码中 setinerval 的作用是什么？

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

setInterval按一定的时间间隔重复调用一个函数
setInterval按一定的时间间隔重复调用一个函数
我想知道的是setinterval在这段代码里面的具体作用，为什么要调用函数，这段代码我不是很明白，代码的思路我也看不出来。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>具有缓冲效果的可伸缩显隐层 </title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">

<script language="javascript">
var flag=0;
function f_s(id){
      var obj=document.getElementById(id);
      obj.style.display="block";
      obj.style.height="1px";

      var changeW=function(){
              var obj_h=parseInt(obj.style.height); //以十进制解析 obj.style.height
              if(obj_h <=335){
                    obj.style.height=(obj_h+Math.ceil((335-obj_h)/10))+"px"; //Math.ceil返回大于大于等于(335-obj_h)/10)的最小整数
              }
              else{
              clearInterval(bw1); //销毁bw1,停止增加DIV的高度
              }
      }
      bw1= setInterval(changeW,1); //每隔1毫秒执行changeW
    if(flag>0){
    clearInterval(bw2); //销毁bw2,停止减小DIV的高度
    }
}
function closeW(id){
  flag++;
      var obj=document.getElementById(id);
      var closeDiv=function(){

        clearInterval(bw1); //销毁bw1,停止增加DIV的高度
              var obj_h=parseInt(obj.style.height);
              if(obj_h>1){
                    obj.style.height=(obj_h-Math.ceil(obj_h)/10)+"px"; //减小DIV高度

              }
              else{
              clearInterval(bw2); //销毁bw2,停止减小DIV的高度
              obj.style.display="none";
              }
      }
      bw2= setInterval(closeDiv,1); //每隔1毫秒执行closeDiv
  //alert(flag)
}
function showDiv(){
var ele = document.getElementById("div1");
clearInterval(bw1);
clearInterval(bw2);
ele.style.display = "block";
ele.style.height = 335 + "px";
}
</script>
</head>
<body>

<div onmouseover="f_s('div1')" onmouseout="closeW('div1')" style="position:absolute;background:black;left:200px;top:34px;width:149px;height:35px;"> </div>
<div id="div1" onmouseover="showDiv()" onmouseout="closeW('div1')" style="position:absolute;background:aqua;left:200px;overflow:hidden;top:70px;width:349px;display:none;">
dfsdfsdf 我是
</div>
</body>
</html>
要实现这个效果，直接更改display的属性不可以么？我的思路是，当鼠标移动到导航菜单的某个按钮时，通过鼠标事件调用js函数，将隐藏的层的display属性设置block使其显示出来，当鼠标离开按钮时再通过鼠标事件将隐藏层的display属性设置为none，当鼠标移动到隐藏曾时，隐藏层的display属性设置为block，当鼠标离开隐藏层时隐藏层的display属性设置为none，但是当隐藏层显示出来后鼠标离开按钮移动到隐藏层时，隐藏层就消失了。setinterval在这里的作用是不是控制这个鼠标过渡的过程？<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function opendiv(id){
var div = document.getElementById(id);
div.style.display = "block";
}
function closediv(id){
var div = document.getElementById(id);
div.style.display = "none";
}
</script>
<style type="text/css">
.one{
width:100px;
height:50px;
background:#039;
}
.two{
width:500px;
height:200px;
position:absolute;
left:10%;
top:80px;
background:#F33;
display:none;
}
</style>
</head><body>
<center>
<div id="one" class="one" onmouseover="opendiv('two')" onmouseout="closediv('two')"></div>
<div id="two" class="two" onmouseover="opendiv('two')" onmouseout="closediv('two')"></div>
</center>
</body>
</html>
直接修改display当然也可以，但是实现不了渐变的效果
恩不要渐变的效果也可以，但是上面的
<div id="one" class="one" onmouseover="opendiv('two')" onmouseout="closediv('two')"> </div>
<div id="two" class="two" onmouseover="opendiv('two')" onmouseout="closediv('two')"> </div>
在鼠标离开id为one的div时 id为two的div就消失了，鼠标无法移动到id为two的div上面有什么方法可以解决么？
你两个DIV是完全分开的，也就是说鼠标无法从one 直接移入two
设计这种效果时，一般情况下，one和two要“接壤”
这样鼠标可以从one直接移到two，而two也不会消失
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档 </title>
<script type="text/javascript">
function opendiv(id){
var div = document.getElementById(id);
div.style.display = "block";
}
function closediv(id){
var div = document.getElementById(id);
div.style.display = "none";
}
</script>
<style type="text/css">
.one{
width:100px;
height:50px;
background:#039;
}
.two{
width:500px;
height:200px;
position:absolute;
left:10%;
top:64px;
background:#F33;
display:none;
}
</style>
</head> <body>
<center>
<div id="one" class="one" onmouseover="opendiv('two')" onmouseout="closediv('two')"> </div>
<div id="two" class="two" onmouseover="opendiv('two')" onmouseout="closediv('two')"> </div>
</center>
</body>
</html>
谢谢，我还有一个疑问，前面的那个有setinterval的代码为什么不接壤也可以在两个层上移动
对呀，为什么有空隙鼠标还可以从一个层移动到另一个层，怎么做到的呢？是setinterval起的作用么？
终于明白了，如果不要渐渐展开的效果，层two会马上消失，鼠标来不及移动到层two，如果有了渐渐展开的效果，层二就会得消失就会有个时间延迟就可以了。