setInterval和clearInterval得用法及其他

这样 ：
-----------------------
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="JavaScript">
var intervalID=0;
function alterTool()
{
intervalID=window.setInterval("loop()",10);
}
var i=0;alterTool();function loop()
{
i++;
tool1.style.height=i;
tool2.style.height=i;
if(tool1.style.height=="100px")
window.clearInterval(intervalID);
}
</script>
</head>
<body>
  <div id="Layer1" >
     <table width="100%" >
       <tr>
          <td bgcolor="#DFDFDF" id="tool1" valign="bottom">aaa</td>
       </tr>
       <tr>
       <td bgcolor="#DFDFDF"  id="tool2" valign="top">aaa</td>
       </tr>
       </table>
   </div>
</body>
</html>

解决方案 »

  1.   

    谢谢你，我想在onMouseOver事件中激发函数alterTool()，可是，现在却在页面生成时就激发了此函数；还有，第二个问题能给点提示吗？
      

  2.   

    <script language="JavaScript">
    var intervalID=0;
    function alterTool()
    {
    intervalID=window.setInterval("loop()",10);
    }
    var i=0;
    window.attachEvent("onload",doExpand);
    function  doExpand()
    {
    Layer1.onmouseover = alterTool;
    }function loop()
    {
    i++;

    if(tool1.style.pixelHeight >= 100)
    {
    window.clearInterval(intervalID);
    return;
    }
    tool1.style.height=i;
    tool2.style.height=i;
    }
    </script>
    ------------------第二个就是文字的对齐问题valign="top"||"bottom"
      

  3.   

    tool1.onMouseOver = alterTool;
      

  4.   

    第一个问题已经解决了，谢谢你的指点，第二个问题可能我没有说明白:
     
    __________
    |  tool1 |
    |________|
    |  tool2 |
    |________|两个表格的位置固定不动,然后tool1的高度向上增长,tool2的高度向下增长,请问该怎样做到呀?
      

  5.   

    /___|______
    |  tool1 |
    |________|
    |  tool2 |
    |________|
        |
        V
      

  6.   

    tool1底端对齐
    tool2顶端对齐
    这样高度增加的时候就好象你说的那样了 
    tool1的高度向上增长,tool2的高度向下增长
      

  7.   

    用绝对定位吧 
    控制div的Y坐标<script language="JavaScript">
    var intervalID=0;
    function alterTool()
    {
    intervalID=window.setInterval("loop()",10);
    }
    var i=0;
    window.attachEvent("onload",doExpand);
    function  doExpand()
    {
    Layer1.onmouseover = alterTool;
    }function loop()
    {
    i++;

    if(tool1.style.pixelHeight >= 100)
    {
    window.clearInterval(intervalID);
    return;
    }
    tool1.style.height= tool1.style.pixelHeight +1;
    tool2.style.height=tool2.style.pixelHeight +1;
    Layer1.style.top = Layer1.style.pixelTop - 1;
    }
    </script><body>
      <div id="Layer1" style="position:absolute; left:12px; top:280px">
         <table width="100%" >
           <tr>
              <td bgcolor="#DFDFDF" id="tool1" style="height:25" valign="bottom">aaa</td>
           </tr>
           <tr>
           <td bgcolor="#DFDFDF"  id="tool2" style="height:25" valign="top">aaa</td>
           </tr>
           </table>
       </div>
    </body>