js定时器（四）点击方块掉下来

这个也可算是前面的三的2.0版本吧

一.要实现的效果

1.自动生成小方块
2.点击小方块，小方块依次掉下来

二.效果图

三.代码

1.css

<style type="text/css">
    div{width: 50px;height: 50px;background: red;}
</style>

2.htnl

null

3.js

<script type="text/javascript">
    var str='';
    var length=20;
    var clock=null;
    var oDiv=document.getElementsByTagName('div');
    var num=0;
    /*创建小方块*/
    for (var i = 0; i <length; i++) {
     str+='<div style="width:50px;height50px;background:red;position:absolute;top:0;left:'+i*60+'px"></div>';
     document.body.innerHTML=str;
    }
    document.onclick=function(){
        clearInterval(clock);
        clock=setInterval(function(){
           run(oDiv[num],10,500,'top');
           num++;
           if (num==length) {
            clearInterval(clock);
           }
        },100);
    }
    function run(obj,dir,target,attr,endFn){
        dir=parseInt(getStyle(obj,attr))<target?dir:(-dir);//在函数内部实现正负号
        clearInterval(obj.timer);
        obj.timer=setInterval(function(){   
            var speed=parseInt(getStyle(obj,attr))+dir;
            // 获取对象当前的attr样式,当前的位置
            if (speed<target && dir<0 || speed>target && dir>0) {//走过头
                speed=target;
            }
            // 当前=目的地
            if(speed==target){
                clearInterval(obj.timer);
                /*if( endFn ){//判断函数或者方法的时候，只写函数名(作为属性来判断)
                 endFn();
                }*/
                endFn && endFn();
            }   

            obj.style[attr]=speed+'px'; 
        },30);
    }
</script>

4.这里我引入了一个外部js

function $(id){
    return document.getElementById(id);
}
function getStyle(obj,attr){
    }return obj.currentStyle?obj.currentStyle:getComputedStyle(obj)[attr];