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>
     
        
  • 相关阅读:
    springboot与docker
    Docker入门笔记(Centos7)
    记录VUE-CLI项目创建及初始化相关
    centos下安装mysql5.6
    GitLab权限介绍
    属性文件操作之Properties与ResourceBundle
    Shell入门基础
    JavaScript基础的记录
    Java基本排序算法
    解读闭包,这次从ECMAScript词法环境,执行上下文说起
  • 原文地址:https://www.cnblogs.com/wanghao1994/p/12116893.html
Copyright © 2011-2022 走看看