                        课程
                    
                        /前端开发
                        
                            /Node.js
                        
                        /进击Node.js基础（二）

只移动了一次，不会往回走

<div class="red" style="margin-left: 1px;"></div>
<div class="blue" style="margin-left: 1px;"></div>
<div class="green" style="margin-left: 1px;"></div>
<script type="text/javascript">
    var b1=document.querySelector(".red");
    var b2=document.querySelector(".blue");
    var b3=document.querySelector(".green");
    var Promise=window.Promise;
    console.log(Promise)
    function promiseMove(ball,distance){
        return new Promise(function(resolve,reject){
            function _move(){
                var mleft=parseInt(ball.style.marginLeft,10);
                setTimeout(function(){
                    var mleft=parseInt(ball.style.marginLeft,10);
                    if(mleft===distance){
                        resolve()
                    }else{
                    mleft<distance?mleft++:mleft--
                    }
                    ball.style.marginLeft=mleft+'px';
                    _move();
                },13)
            };
            _move();
        })
    }
    promiseMove(b1,100)
        .then(function(){
            return promiseMove(b2,200)
        }).then(function(){
            return promiseMove(b3,300)
        }).then(function(){
            return promiseMove(b3,150)
        }).then(function(){
            return promiseMove(b2,150)
        }).then(function(){
            return promiseMove(b1,150)
        })
</script>

Marsd

2016-04-30

源自：进击Node.js基础（二） 1-2

关注问题我要回答

1086

操作

收起

3 回答

我的女神回答被采纳 +3 积分
2016-05-02

骚年，我两犯了同样的错误。

0 回复有任何疑惑可以回复我~

收起回答

Marsd 提问者

非常感谢！

2016-05-03 回复有任何疑惑可以回复我~

过时代的高贵
2016-06-12

<!DOCTYPE html>

<html>

<head>

<title>promise animation</title>

<style>

.ball{

width: 40px;

height:40px;

border-radius:20px;

}

.ball_fi{

background: red;

}

.ball_se{

background: green;

}

.ball_th{

background: blue;

}

</style>

</head>

<body>

var ballfi=document.querySelector(".ball_fi")

var ballse=document.querySelector(".ball_se")

var ballth=document.querySelector(".ball_th")

function animate(balls,distance,cb){

setTimeout(function(){

var marginLeft= parseInt(balls.style.marginLeft,10)

if(marginLeft===distance){

cb && cb()

}else {

if(marginLeft<distance){

marginLeft++

}else{

marginLeft--

}

balls.style.marginLeft=marginLeft+"px"

animate(balls,distance,cb)

}

},10)

}

animate(ballfi,100,function(){

animate(ballse,300,function(){

animate(ballth,150,function(){

animate(ballth,200,function(){

animate(ballse,100,function(){

animate(ballth,100,function(){

})

</script>

</body>

</html>

0 回复有任何疑惑可以回复我~

收起回答

慕慕9986984
2016-05-01

看了半天，也没有发现问题呀！

0 回复有任何疑惑可以回复我~

收起回答

Marsd 提问者

就是看不出来才问的。。你有负责代码运行试试吗；

2016-05-01 回复有任何疑惑可以回复我~

0/150

提交

取消

进击Node.js基础（二）

参与学习 76755 人
解答问题 226 个

本教程带你攻破 Nodejs，让 JavaScript流畅运行在服务器端

进入课程

只移动了一次，不会往回走

我要回答关注问题

热搜

最近搜索清空

只移动了一次，不会往回走

3 回答

只移动了一次，不会往回走