我这段代码为什么不能实现动态效果？

本帖最后由 xiaojing7 于 2009-04-29 15:23:37 编辑

解决方案 »

  1.   

    <div id=myElement style="height:100px;width:100px;background-color:red"></div>
    <script>
    var a=document.getElementById("myElement");
    var b=0;
    (function(){for (i = 0; i < 200; i++) 
                 b=b+30;
                 setInterval(function(){a.style.height=b;},200)
        })()</script> 
      

  2.   

    script 加defer="defer"属性。去掉循环。<div id="myElement" style="height:100px;width:100px;background-color:red"></div>
    <script defer="defer">
    var a = document.getElementById("myElement");
    var b = 0;
    (function(){
       setInterval(function(){b += 30; a.style.height = b + "px";}, 200);
    })();
    </script> 
      

  3.   


    <div id="myElement" style="height:100px;width:100px;background-color:red">fff</div>//这里的DIV里要有内容，这里的ID最好加上引号
    <script>
    var a=document.getElementById("myElement");
    var b=0;//注意，规范的写法是要var的
    (function(){for (i = 0; i < 200; i++) 
       b=b+30;
       setInterval(function(){a.style.height=b+'px';},200);//这里要加PX
        })()</script>  
      

  4.   

    不好意思 2楼的仁兄可以实现 我想要的效果 谢谢了啊不过<script defer="defer"> 这个可以在很多浏览器中执行但是我从来没见过这东西 他有什么用啊？ 为什么可以代替循环？？
      

  5.   

    LZ，不关defer="defer"的事，你在代码中用了setInterval，还用For循环干嘛，setInterval本身就是指定这个函数每个多少毫秒执行一次。所以只要这样就够了：
    var a = document.getElementById("myElement");
    var b = 0;
    (function(){
    setInterval(function(){b += 30; a.style.height = b + "px";}, 1000);
    })();
      

  6.   

    搞不明白为啥还要for?难道lz想要的功能不是这样的？<div id=myElement style="height:100px;width:100px;background-color:red"></div>
    <script>
    var a=document.getElementById("myElement");
    var b=0;
    (function(){
        
    var tm = setInterval(function(){a.style.height=b+'px';b=b+5;if(b>200){clearInterval(tm);tm=null;}},1)
     })()</script> 
      

  7.   

    其实我是按我想的做的  下面这个也想实现上面的功能 
    用setTimeout 做的  也没啥目的 就是想知道能不能做出来
    我的这个 好像不行 虽然逻辑上是合理的
    <div id=myElement style="height:100px;width:100px;background-color:red"></div>
    <script>   
    var a=document.getElementById("myElement");
    var b=0;
    (function(){for (i = 0; i < 50; i++) 
                 b=b+30;
                 var aa=setTimeout(function(){a.style.height=b;},200)
     setTimeout(clearTimeout(aa),201)
        })()
    </script>  
      

  8.   


    <body>
    <div id=myElement style="height:100px;width:100px;background-color:red"></div><script>
    var b=0;
    (function(){
    for (i = 0; i < 50; i++){
    var a=document.getElementById("myElement");
        setTimeout(function(){
         b+=5;
         a.style.height=b+"px";
        },10*i)
    } 
    })()</script>
     </body>
      

  9.   


    <body>
    <div id=myElement style="height:100px;width:100px;background-color:red"></div><script>
    var b=0;
    var a=document.getElementById("myElement");
    (function(){
    for (i = 0; i < 50; i++){
        setTimeout(function(){
         b+=5;
         a.style.height=b+"px";
        },10*i)
    } 
    })()</script>
     </body>
      

  10.   

    我试验了下 12楼的这位仁兄的效果很好  是慢慢增加到指定值 而且也是理想效果了但是我试验中发现 其中最关键的是 setTimeout(fn,10*i)后面的那个时间值的设置如果不设置*i 那么不管你设置哪个固定值  都出现不了 所要的效果 后来我还以为是defer的事  加上去了 也没用 大家看下代码吧var a=document.getElementById("myElement");
    var b=0;
    (function(){for (i = 0; i < 50; i++) 
              setTimeout(function(){
         b=b+5;
      a.style.height=b+'px';
      },1000)
                
        })()上面的代码 和12楼仁兄的几乎一模一样  不同的只是 我把时间设置为了固定值 1000大家可以看一下效果 渐变没有出来 不解为什么 是这样？ 望高手解答小弟疑惑～
      

  11.   

    setTimeout(function,1000)
    的意思是1000MS后执行function
    在for 中，50次setTimeout(function,1000)通通的在1000MS后执行function,当然“渐变没有出来”--而是（几乎瞬间）同时动作
    要想“渐变”出来，就需要每次执行function的延迟时间不同，所以我使用了
    setTimeout(function，10*i)
    意思是：
    第一次延迟到0 MS执行function
    第二次延迟到10 MS执行function
    第三次延迟到20 MS执行function
    ....
    不知说明白了吗^_^