循环运动
利用js的回调函数特征：
相互调用，实现方块的循环变色滚动，代码如下：
css：样式：
<style>
div{
width: 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>
