Mis-小甜 2015-07-27 01:40 采纳率: 0%
浏览 1546

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 2015-07-31 09:40
    关注

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

    评论

报告相同问题?

悬赏问题

  • ¥100 关于使用MATLAB中copularnd函数的问题
  • ¥20 在虚拟机的pycharm上
  • ¥15 jupyterthemes 设置完毕后没有效果
  • ¥15 matlab图像高斯低通滤波
  • ¥15 针对曲面部件的制孔路径规划,大家有什么思路吗
  • ¥15 钢筋实图交点识别,机器视觉代码
  • ¥15 如何在Linux系统中,但是在window系统上idea里面可以正常运行?(相关搜索:jar包)
  • ¥50 400g qsfp 光模块iphy方案
  • ¥15 两块ADC0804用proteus仿真时,出现异常
  • ¥15 关于风控系统,如何去选择