如何控件这段JS的显示速度？

setTimeout("函数名称",毫秒);

解决方案 »

  1.   

    <script language="JavaScript">
    <!--
    function turnit(ss)
    {
    var time = new Date();
    while(true){
    var time2 = new Date();
    if(time2.getTime()-time.getTime()>100){  //可以修改等待时间
        break;
    }
    }
    if (ss.style.display=="none")             // 当ss.style.display为隐藏时
    {   
    table1.style.display="none";        // 隐藏
    table2.style.display="none";        // 隐藏
    ss.style.display="";                // 显示ss.style.display的对象
    }else{
    ss.style.display="none";            // 隐藏
    }
    }
    // -->
    </script>
      

  2.   

    这种效果????
    <html>
    <head></head>
    <body>
    <script language="JavaScript">
    <!--
    var   step   =   1;//每次变化的px量 
    var   ms   =   10;//每隔多久循环一次 
    var maxheight;
    var minheight=1;
    var obj=null;
    var ts=null;
    function turnit(div,tb)
    {  
      clearTimeout(ts);//先清除timeout
      obj=document.getElementById(div);
      maxheight=parseInt(document.getElementById(tb).offsetHeight);//获取要滚动的最大高度
      if(parseInt(obj.style.height)<2)
         step=1;//展开
      else
         step=-1;//收缩
      setTimeout("setHeight()",ms);
    }
    function setHeight()
    {
      var h=parseInt(obj.style.height)+step;
      if(step==-1)
        if(h>=minheight)
        {
          obj.style.height=h+"px";
          ts=setTimeout("setHeight()",ms);
          return;
        }
      if(step==1)
        if(h<=maxheight)
        {
          obj.style.height=h+step+"px";
          ts=setTimeout("setHeight()",ms);
          return;
        }
    }
                    </script>
    <table width="148" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td height="21" bgcolor="#ececec">
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td height="21" background="images/bg_w1.gif"  onclick="turnit('div1','table1')" align="center"><a href="#" class="f_12_ww_b">最新产品</a></td>
                    </tr>
                </table>
                
            </td>
        </tr>
        <tr style="clip:rect(0 148 20 148)">
            <td bgcolor="#ececec">
    <div id="div1" style="overflow:hidden;height:108">
                <table width="148" border="0" align="center" cellpadding="10" cellspacing="0" id="table1"
                    style="DISPLAY: block">
                    <tr>
                        <td bgcolor="#ececec"><a href="product_1.htm" class="f_12_gb_l">最新产品</a>
                            <br>
                            <a href="product_1.htm" class="f_12_gb_l">最新产品1</a>
                            <br>
                            <a href="product_1.htm" class="f_12_gb_l">最新产品2</a>
                            <br>
                            <a href="product_1.htm" class="f_12_gb_l">最新产品3</a></td>
                    </tr>
                </table>
    </div>
            </td>
        </tr>
        <tr>
            <td height="21" bgcolor="#ececec">
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td height="21" background="images/bg_w2.gif" align="center" style="CURSOR: hand" onclick="turnit('div2','table2')";><a href="#" class="f_12_ww_b">销售排行</a></td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td bgcolor="#ececec">
    <div id="div2" style="overflow:hidden;height:1px;">
     <table width="148" border="0" align="center" cellpadding="10" cellspacing="0" id="table2">
                    <tr>
                        <td bgcolor="#ececec"><a href="product_1.htm" class="f_12_gb_l">销售排行</a>
                            <br>
                            <a href="product_1.htm" class="f_12_gb_l">销售排行1</a>
                            <br>
                            <a href="product_1.htm" class="f_12_gb_l">销售排行2</a>
                            <br>
                            <a href="product_1.htm" class="f_12_gb_l">销售排行3</a></td>
                    </tr>
                    <tr>
                        <td bgcolor="#ececec"><a href="product_1.htm" class="f_12_gb_l">销售排行</a>
                            <br>
                            <a href="product_1.htm" class="f_12_gb_l">销售排行1</a>
                            <br>
                            <a href="product_1.htm" class="f_12_gb_l">销售排行2</a>
                            <br>
                            <a href="product_1.htm" class="f_12_gb_l">销售排行3</a></td>
                    </tr>
                </table>
    </div>
            </td>
        </tr>
    </table>
    </body>
    </html>
      

  3.   

    你的那种效果不能用display=none来实现啊,应该改变父容器的高度,慢慢收缩而这个改变高度的过程用settimeout控制时间间隔和频率
      

  4.   

    to showbo :太感谢了，大概就是这种效果。能不能再帮我改一下，我需要点下面的栏目时，上面的自动合上，下面的展开；点上面的栏目时，下面的自动合上，上面的展开。能否再帮我改一下。再次感谢。
      

  5.   

    <html>
    <head></head>
    <body>
    <script language="JavaScript">
    <!--
    var step=1;//每次变化的px量 
    var ms=10;//每隔多久循环一次 
    var maxheight;
    var minheight=1;
    var showobj=null;
    var hiddenobj=null;
    var showts=null;
    var hiddents=null;
    function turnit(ID)
    {  
      clearTimeout(showts);//先清除timeout
      clearTimeout(hiddents);//先清除timeout
      if(ID=="1")
      {   
        showobj=document.getElementById("div1");
        hiddenobj=document.getElementById("div2"); 
      }
      else
      {  
        showobj=document.getElementById("div2");
        hiddenobj=document.getElementById("div1");     
      }
      maxheight=parseInt(document.getElementById("table"+ID).offsetHeight);//获取要滚动的最大高度  
      if(parseInt(showobj.style.height)<2)
         step=1;//展开
       else
         step=-1;//收缩
      showts=setTimeout("setShow()",ms);
      if(parseInt(hiddenobj.style.height)>2)//为展开状态时才收缩
        hiddents=setTimeout("setHidden()",ms);
    }
    function setHidden()
    {
      var h=parseInt(hiddenobj.style.height)-1;
      if(h>=minheight)
      {
        hiddenobj.style.height=h+"px";
        hiddents=setTimeout("setHidden()",ms);
      }
    }
    function setShow()
    {
      var h=parseInt(showobj.style.height)+step;
      if(step==-1)
        if(h>=minheight)
        {
          showobj.style.height=h+"px";
          showts=setTimeout("setShow()",ms);
          return;
        }
      if(step==1)
        if(h<=maxheight)
        {
          showobj.style.height=h+step+"px";
          showts=setTimeout("setShow()",ms);
          return;
        }
    }
                    </script>
    <table width="148" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td height="21" bgcolor="#ececec">
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td height="21" background="images/bg_w1.gif"  onclick="turnit('1')" align="center"><a href="#" class="f_12_ww_b">最新产品</a></td>
                    </tr>
                </table>
                
            </td>
        </tr>
        <tr style="clip:rect(0 148 20 148)">
            <td bgcolor="#ececec">
    <div id="div1" style="overflow:hidden;height:108">
                <table width="148" border="0" align="center" cellpadding="10" cellspacing="0" id="table1"
                    style="DISPLAY: block">
                    <tr>
                        <td bgcolor="#ececec"><a href="product_1.htm" class="f_12_gb_l">最新产品</a>
                            <br>
                            <a href="product_1.htm" class="f_12_gb_l">最新产品1</a>
                            <br>
                            <a href="product_1.htm" class="f_12_gb_l">最新产品2</a>
                            <br>
                            <a href="product_1.htm" class="f_12_gb_l">最新产品3</a></td>
                    </tr>
                </table>
    </div>
            </td>
        </tr>
        <tr>
            <td height="21" bgcolor="#ececec">
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td height="21" background="images/bg_w2.gif" align="center" style="CURSOR: hand" onclick="turnit('2')";><a href="#" class="f_12_ww_b">销售排行</a></td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td bgcolor="#ececec">
    <div id="div2" style="overflow:hidden;height:1px;">
     <table width="148" border="0" align="center" cellpadding="10" cellspacing="0" id="table2">
                    <tr>
                        <td bgcolor="#ececec"><a href="product_1.htm" class="f_12_gb_l">销售排行</a>
                            <br>
                            <a href="product_1.htm" class="f_12_gb_l">销售排行1</a>
                            <br>
                            <a href="product_1.htm" class="f_12_gb_l">销售排行2</a>
                            <br>
                            <a href="product_1.htm" class="f_12_gb_l">销售排行3</a></td>
                    </tr>
                    <tr>
                        <td bgcolor="#ececec"><a href="product_1.htm" class="f_12_gb_l">销售排行</a>
                            <br>
                            <a href="product_1.htm" class="f_12_gb_l">销售排行1</a>
                            <br>
                            <a href="product_1.htm" class="f_12_gb_l">销售排行2</a>
                            <br>
                            <a href="product_1.htm" class="f_12_gb_l">销售排行3</a></td>
                    </tr>
                </table>
    </div>
            </td>
        </tr>
    </table>
    </body>
    </html>