10慕課網《進擊Node.js基礎（一）》初識promise
阿新 • • 發佈：2018-06-18
ima script 改變 ack 一次 margin ML rom 指定
首先用嘴簡單的方式實現一個動畫效果
<!doctype> <html> <head> <title>Promise animation</title> <style type="text/css"> .ball { width: 40px; height: 40px; border-radius: 20px; } .ball1 { background: red; } .ball2 { background: yellow; } .ball3 { background: green; } </style> </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, cd){ //每13毫秒改變一次圓球的位置，直到到達指定位置setTimeout(function(){ var marginLeft = parseInt(ball.style.marginLeft,10) //球達到預期位置 if(marginLeft === distance){ cd && cd() }else{ //球在左側 if(marginLeft < distance){ marginLeft++ }else{ //球在右側 marginLeft-- } //調整球的位置 ball.style.marginLeft = marginLeft animate(ball, distance, cd) } },13) } //控制動畫 animate(ball1, 100,function(){ animate(ball2, 200, function(){ animate(ball3, 150, function(){ animate(ball2, 150, function(){ animate(ball1, 150, function(){ }) }) }) }) }) </script> </body> </html>
10慕課網《進擊Node.js基礎（一）》初識promise