                        課程
                    
                        /前端開發(fā)
                        
                            /Node.js
                        
                        /進(jìn)擊Node.js基礎(chǔ)（二）

運行執(zhí)行不了

<!doctype html>
<html>
<head>
<style type="text/css">
?? ?.ball{ width: 40px; height: 40px; border-radius: 50%;}
?? ?.ball1 { background: red; }
?? ?.ball2 { background: yellow; }
?? ?.ball3 { background: green; }
</style>
<meta charset="utf-8">
<title>Promise animation</title>
</head>

<body>
?? ?<div class="ball ball1" style="margin-left: 0;"></div>
?? ?<div class="ball ball2" style="margin-left: 0;"></div>
?? ?<div class="ball ball3" style="margin-left: 0;"></div>
?? ?
??? <script type="text/javascript">
?? ??? ?var ball1=document.querySelector('.ball1');
?? ??? ?var ball2=document.querySelector('.ball2');
?? ??? ?var ball3=document.querySelector('.ball3');
?? ??? ?
?? ??? ?function animate(ball, distance, callback){
?? ??? ??? ?//distance：傳入數(shù)據(jù)，期望球所運動到的那個點
?? ??? ??? ?setTimeout(function(){
?? ??? ??? ??? ?var marginLeft=parseInt(ball.style.marginLeft,10);
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ?if(marginLeft==distance){
?? ??? ??? ??? ??? ?callback&callback();?? ?
?? ??? ??? ??? ?}else {
?? ??? ??? ??? ??? ?? if(marginLeft < distance){
?? ??? ??? ??? ??? ??? ?? marginLeft++;
?? ??? ??? ??? ??? ?? }else{
?? ??? ??? ??? ??? ??? ?? marginLeft--;
?? ??? ??? ??? ??? ?? }
?? ??? ??? ??? ??? ?? ball.style.marginLeft=marginLeft;
?? ??? ??? ??? ??? ?? animate(ball, distance, callback);
?? ??? ??? ??? ?}
?? ??? ??? ?}, 13);?? ?//jq中設(shè)定的動畫毫秒數(shù)
?? ??? ?}
?? ??? ?
?? ??? ?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>
</body>
</html>