通过定时器实现move（）函数最终版之自学js系列

<style>
    #box{width: 100px;
              height: 100px;
                    background-color: green;
                          position: absolute;
                                               }    
     #box2{width: 100px;
              height: 100px;
                    background-color: red;
                          position: absolute;
                                top: 200px;
                                               }    

    *{margin: 0px;
        padding: 0px;
                        }/* //清除浏览器默认样式 */

</style>
<script src="./tools(js工具箱).js"></script>
<!-- <script src="./tools(js工具箱).js"></script> -->

<script>
    window.onload=function(){
        var btn1=document.getElementById("btn1");
        var btn2=document.getElementById("btn2");
        var btn3=document.getElementById("btn3");
        var btn4=document.getElementById("btn4");
        var  box =document.getElementById("box");
        var  box2 =document.getElementById("box2");
       /*  var timer; */
        var timer2;
    
        btn1.onclick=function(){
            /* clearInterval(timer);
            timer=setInterval(function(){
                var oldvalue = parseInt(getstyle(box,"left"));//getstyle()函数获取的自动带单位
                var newvalue = oldvalue + 10;//赋值不能带"px"
                box.style.left = newvalue + "px" ; //left=自身带单位，必须 +px拼串
                if(newvalue > 800) newvalue=800;
                if(newvalue == 800 ) clearInterval(timer);
            } ,30) */
            move(box,800,10,"left",function(){
            
            })
        }

            btn2.onclick=function(){
           /*  clearInterval(timer2);
            timer2=setInterval(function(){
                var oldvalue = parseInt(getstyle(box,"left"));//getstyle()函数获取的自动带单位
                var newvalue = oldvalue - 10;//赋值不能带"px"
                box.style.left = newvalue + "px" ; //left=自身带单位，必须 +px拼串
                if(newvalue < 0) newvalue=0;
                if(newvalue == 0 ) clearInterval(timer2);
            } ,30)      */
            move(box,0,-10,"left",function(){
           
            })

        }
            
            btn3.onclick=function(){
                move(box2,800,10,"left",function(){

                })
            }
        
            btn4.onclick=function(){
                //感受move（）函数中callback参数的魅力
                move(box2,800,10,"width",function(){
                    //第一次变形含义是让box2的宽度以10/s的速度正向增至800;（对于高度正向为向下，宽度正向为向右）
                    move(box2,400,10,"height",function(){
                        //第二次的变形含义是让box2的高度以10/s的速度正向增至400;（对于高度正向为向下，宽度正向为向右）
                        move(box2,0,-10,"top",function(){
                            //第三次的变形含义是让box2的距离顶部的距离以10/s的速度反向变为0;（对于高度正向为向下，宽度正向为向右）
                            move(box2,100,-10,"width",function(){
                                //第四次的变形含义是让box2的宽度以10/s的速度反向减少至100;（对于高度正向为向下，宽度正向为向右）

                            })
                        })
                    })
                })

            }
        //这样传统的方式不能实现正在右移时进行左移；要通过提取函数的方法可以实现效果；
        //此时发现问题，当不同的box同时调用move()函数时，由于调用的均为同一个定时器。
       /*  ———————————————————————————————————————————————————————————————————————————————————————— */
       /*  ———————————————————————————————————————————————————————————————————————————————————————— */
        //会出现一个单击A跑过去，另一个点的时候使A暂停，B继续跑的效果；————此时不动仅有一个问题(定时器出错了)
        //1.单击A（代表的box1） ——清除定时器，返回空值，啥也不做，执行程序~
        //2.在1之后紧接着单击B（代表的box2） ——清除定时器(此时将box1的定时器清除，因此A不动，B继续动)    
       // 因此，清除定时器时应分开处理，即分对象处理
        /*  ———————————————————————————————————————————————————————————————————————————————————————— */
        /*  ———————————————————————————————————————————————————————————————————————————————————————— */
        
        /* function move(obj,target,speed,yangshi,callback){
            //1.获取样式的对象 ————  obj
            //2.控制移动速度变量 ———— speed
            //3.target ——————最终要去往的目标，即为目标变量；
            //4.yangshi ——————要获取对象的各种样式，比如：left top width height
            clearInterval(obj.timer2);
            //obj.timer2，分对象对timer2进行操作，会避免出现共用一个定时器冲突时所导致的一个暂停一个继续跑的效果。
           obj.timer2=setInterval(function(){
                var oldvalue = parseInt(getstyle(obj,yangshi));//getstyle()函数获取的自动带单位
                var newvalue = oldvalue + speed;//赋值不能带"px"
                obj.style[yangshi] = newvalue + "px" ; //left=自身带单位，必须 +px拼串
                //此处的obj.style[yangshi]后面必须用【】而不能用.yangshi ,在此yangshi 是一个变量，style返回的是一个数组，可以通过数组【变量】调用其中属性。不能用数组。变量
                if(newvalue < 0 && speed < 0 || speed > 0 && newvalue >target) newvalue=target;
                if(newvalue == target )  { clearInterval(obj.timer2); callback&&callback();}
                                                //不要忘了此处的obj，要不然清除定时器的时候由于上面获取的均为obj.定时器，每个对象都有定时器，
                                               //   此处若不写obj，则找不到对应的定时器，即无法清除对应定时器，即会出现跑飞了bug。
            } ,30)   
        }

        function  getstyle(obj,name){
         if(window.getComputedStyle) return getComputedStyle(obj,null)[name];
         else return obj.currentStyle[name];
     } */

    }
    
</script>

点我上面的右滑 点我左滑 点我下面的右滑 测试按钮