zoukankan      html  css  js  c++  java
  • 循环运动

    利用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>
     
        
  • 相关阅读:
    对Spring Boot 及Mybatis简单应用
    云时代架构读后感(十)
    云时代架构读后感(九)
    云时代架构读后感(八)
    云时代架构读后感(七)
    云时代架构读后感(六)
    关于mysql,sqlserverl,与oracle数据库连接总结
    云时代架构读后感(五)
    javaweb实现添加课程
    javaweb入门(使用SQLserver2008 R2数据库)
  • 原文地址:https://www.cnblogs.com/wanghao1994/p/12116893.html
Copyright © 2011-2022 走看看