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

跟視頻敲的球?yàn)槭裁床荒芏畡?dòng)??？控制臺(tái)錯(cuò)誤提示：解析 'margin-left' 的值時(shí)出錯(cuò)。聲明被丟棄。

<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<title>Title</title>
? ?<style>
? ? ? ?.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>

? ? ?var ball1=document.querySelector('.ball1');
? ? ?//console.log(ball1.style.marginLeft);
var ball2=document.querySelector('.ball2');
? ? ?var ball3=document.querySelector('.ball3');

? ? ?function animate(ball,distance,cb){
? ? ? ? ?setTimeout(function () {
? ? ? ? ? ? ?var marginLeft = parseInt(ball.style.marginLeft,10)+"px" ;
? ? ? ? ? ? ?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>

</body>
</html>