正负值地处理以及添加回调函数小案例

今天写一个简单的小例子，需求：页面有多个div，点击屏幕，div有顺序的依次下来。

来看js代码：

<script>

    window.onload=function(){
        //第一步先追加多个div
        var str="";
        var len=20;

        var aDiv=document.getElementsByTagName("div");
        var timer=null;
        var num=0;
        for(var i=0;i<len;i++){
            str+='<div style="50px;height:50px;background:#ff7e7e;position:absolute;left:'+i*60+'px;top:0;"></div>'
        }
        document.body.innerHTML=str;
        //添加点击事件
        var onOff=true;
        document.onclick=function(){
            clearInterval(timer);
            timer=setInterval(function(){
                fn(aDiv[num],"top",18,500);
                num++;
                if(num===len){
                    clearInterval(timer);
                }
            },100)

        };
        
        function fn(obj,attr,dir,target,endFn){
            clearInterval(obj.timer);//这里先要清除一下定时器是为了防止一直点击按钮，div一直加速
            //dir值是负责方向的，ta与目标值相比，若是为负数说明是往反方向的，而若为正数的话是往正方向的
            dir=parseInt(getStyle(obj,attr))<target?dir:-dir;
            //开启定时器,假定让其等于目标值的时候，停止下来
            obj.timer=setInterval(function(){
                var speed=parseInt(getStyle(obj,attr)) + dir; //这里的left也是可以作为参数传递过来的

                if( speed > target && dir>0 || speed < target && dir<0){
                    speed = target
                }

                obj.style[attr]= speed +"px";

                if( speed == target){
                    clearInterval(obj.timer);
                    //移动到第一个目标值的时候，让其换目标移动,因此要在这里调用一下函数
                    endFn && endFn();//这个写法就等于if(endFn){ endFn()},也就是当endFn不是未定义的时候就调用endFn
                }

            },50)

        }

    };
    //兼容不同浏览器获取行间样式
    function getStyle ( obj, attr ) {
        return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr];
    }

</script>

 效果图如下：

好了，今天就这样！