代码运行不了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Promise animation</title>
<style>
.ball{
width:40px;
height:40px;
border-radius: 20px;
margin-left:0;
}
.ball1{background: red;}
.ball2{background: yellow;}
.ball3{background: green;}
</style>
</head>
<body>
<div class="ball ball1"></div>
<div class="ball ball2"></div>
<div class="ball ball3"></div>
<script>
var ball1=document.querySelector('.ball1');
var ball2=document.querySelector('.ball2');
var ball3=document.querySelector('.ball3');
function animate(ball,distance,cb){
setTimeout(function(){
var marginLeft=parseInt(ball.style.marginLeft,10);
if(marginLeft===distance){
cb&&cb()
}else{
if(marginLeft<distance){
marginLeft++
}else{
marginLeft--
}
ball.style.marginLeft=marginLeft+'px';
animate(ball,distance,cb);
}
},13)
}
animate(ball1,100,function(){
animate(ball2,200,function(){
animate(ball3,300,function(){
animate(ball3,150,function(){
animate(ball2,150,function(){
animate(ball1,150,function(){
})
})
})
})
})
})
</script>
</html>
