2 a1104381972 a1104381972 于 2015.07.27 09:40 提问

javascript 定时器和变量相关 忘好心人前辈帮忙看一下。
 <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            div{
                width:20px;
                height:20px;
                background-color: red;
                position: absolute;
                margin-top: 10px;
                float:left;
                top:0;
            }
        </style>        
    </head>
    <body>
    <script type="text/javascript">
    window.onload = function (){       
        var len = 100,
            num = 0,
            num1 = 0,
            timer = null,
            timer1 = null,
            off = true,
            aDiv = document.getElementsByTagName('div');
            function getStyle (obj,attr){
                return obj.currentStyle? obj.currentStyle[attr] : getComputedStyle(obj,null)[attr];
            };

            for(var i = 0 ; i< len ; i++){
                document.body.innerHTML += "<br><div></div><br>"
            };
            for(var i = 0 ; i<aDiv.length ; i++){
                aDiv[i].style.left = i*30+'px';
            }


            document.onclick = function (){  

 /*为何将num = 0,timer = null申明为局部变量啦之后 红色方块就恢复正常。 
 (就是快速双击的时候不会出现div上下分离了,而是无论如何点击都是按照重第一个块开始按预期的走(就是按局部变量那种)。
 我尝试着去除var 关键字,变成全局变量后就出现不正常。
 问题说明:这两种变化我不知道是什么原因造成的!我觉得这里声明局部或者全局变量的作用是一样的。都是为了重置~)希望有热心人解答一下,我弄好久没弄出来...*/

                     num = 0;                   
                     timer = null;
                    if(off ){
                      lastFn(500);
                      off = false;              
                    }else{
                      lastFn(0);
                      off = true;                         
                    };
                    function lastFn (target){
                        clearInterval(timer);
                        timer = setInterval(function(){
                             doMore(aDiv[num],'top',100,target);
                             num++;
                             if(num === len){
                               clearInterval(timer);
                             };                         
                        },30);                         
                    };
            };  

               function doMore (obj,attr,dir,target,endFn){
                    dir = parseInt(getStyle(obj,attr)) < target? dir :-dir;
                    clearInterval(obj.timer);
                    obj.timer = setInterval(function (){
                       var iSpeed = parseInt(getStyle(obj,attr))+dir;
                        if(iSpeed > target && dir > 0 || iSpeed < target && dir < 0){
                            iSpeed = target;
                            endFn && endFn();
                        };
                        obj.style[attr] = iSpeed+'px';
                    },30);
               };        
    };
    </script>

    </body>
</html>

2个回答

Vanqqqq
Vanqqqq   2015.07.31 17:40

不是很清楚你要做什么,而且你的效果有什么问题?

u013222136
u013222136   2015.08.04 14:14

-0-你想要实现什么效果

Csdn user default icon
上传中...
上传图片
插入图片