循环运动

利用js的回调函数特征:

  相互调用,实现方块的循环变色滚动,代码如下:

  

  css:样式:

  

 <style>
        div{
             100px;
            height: 100px;
            background-color: yellow;
            position: absolute;
            
        }
    </style>
 
 
  js:代码:
  
<script>
        var left=0;
        var tops =0;
        var div = document.querySelector("div");
        function fnLeft(fn,fn1,fn2){
            var f=arguments.callee;
            var dis = setInterval(function(){
                left+=5;
                if(left<=800){
                    div.style.left=left+"px";
                    div.style.backgroundColor="red";
                }else{
                    clearInterval(dis);
                    fn(fn1,fn2,f);
                }
                // clearInterval(dis);
            },30)
        }
        function fnTop(fn,fn1,fn2){
            console.log("aaaa");
            var f=arguments.callee;
            var dis = setInterval(function(){
                tops+=5;
                if(tops<=400){
                    div.style.top=tops+"px";
                    div.style.backgroundColor="purple"
                }else{
                    clearInterval(dis);
                    fn(fn1,fn2,f)
                }
            },30)
        }
        function fnRight(fn,fn1,fn2){
            var f=arguments.callee;
            var dis = setInterval(function(){
                console.log(left);
                left-=5;
                if(left>=0){
                    div.style.left=left+"px";
                    div.style.backgroundColor="green"
                }else{
                     clearInterval(dis);
                     fn(fn1,fn2,f);
                }
            },30)
        }
        function fnBottom(fn,fn1,fn2){
            console.log("vbbbbb");
            var f=arguments.callee;
            var dis=setInterval(function(){
                tops-=5;
                if(tops>=0){
                    div.style.top=tops+"px";
                    div.style.backgroundColor="yellow"
                }else{
                    clearInterval(dis);
                    fn(fn1,fn2,f);
                }
            },30)
        }
        fnLeft(fnTop,fnRight,fnBottom);
    </script>
 
    
原文地址:https://www.cnblogs.com/wanghao1994/p/12116893.html