亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定

小球移動速度

難道就我一個人遇到這個問題？一號球移動緩慢，二三號球一瞬間就完成了移動

正在回答

4 回答

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

.ball {

width: 40px;

height: 40px;

border-radius: 20px;

margin-left: 0;

}

.ball1 {

background-color: red;

}

.ball2 {

background-color: green;

}

.ball3 {

background-color: blue;

}

</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');

console.log(ball1);


function animate(ball, distance, cb, flag) {

//flag 用來模擬并發

setTimeout(function() {

var marginLeft = parseInt(ball.style.marginLeft, 10);

console.log(marginLeft);

if(marginLeft === distance && flag !== true) {

return cb && cb();? ?//return 避免無限循環

}


else if(marginLeft < distance) {

marginLeft++;

}

else if(marginLeft > distance) {

marginLeft--;

}

if(flag === true) {

cb();

}

ball.style.marginLeft = marginLeft + 'px';

console.log(ball + '!!!');

animate(ball, distance, cb);

}, 13);

}


animate(ball1, 100, function() {

animate(ball2, 200, function() {

animate(ball3, 300, function() {

animate(ball3, 200, function() {

animate(ball1, 200, function() {


});

}, true);

});

});

});

</script>

</body>

</html>



1 回復 有任何疑惑可以回復我~

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

.ball {

width: 40px;

height: 40px;

border-radius: 20px;

margin-left: 0;

}

.ball1 {

background-color: red;

}

.ball2 {

background-color: green;

}

.ball3 {

background-color: blue;

}

</style>

<script type="text/javascript" src="node_modules/bluebird/js/browser/bluebird.js"></script>

</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');

console.log(ball1);



/*animate(ball1, 100, function() {

animate(ball2, 200, function() {

animate(ball3, 300, function() {

animate(ball3, 200, function() {

animate(ball1, 200, function() {


});

}, true);

});

});

});*/


var Promise = window.Promise;


function promiseAnimate(ball, distance) {

return new Promise(function(resolve, reject) {

function _animate() {

var flag = false;//按老師的會不斷循環，所以我加了個flag標志

setTimeout(function() {

var marginLeft = parseInt(ball.style.marginLeft, 10);

console.log(marginLeft);

if(marginLeft === distance) {

flag = true;

resolve();

}


else {

if(marginLeft < distance) {

marginLeft++;

}

else {

marginLeft--;

}

}

ball.style.marginLeft = marginLeft + 'px';

// console.log(ball + '!!!');

if(!flag) {

_animate();

}


}, 20);

}

_animate();

});

}


promiseAnimate(ball1, 100)

.then(function() {

return promiseAnimate(ball2, 200)

})

.then(function() {

return promiseAnimate(ball3, 300)

})

.then(function() {

return promiseAnimate(ball3, 200)

})

.then(function() {

return promiseAnimate(ball1,200)

});

</script>

</body>

</html>



1 回復 有任何疑惑可以回復我~

你看看你的循環是不是出現問題了

animate(ball,distance,cd);

必須放在else里哦，我也出現類似問題，如果放在判斷外這個方法就會一直跑的

1 回復 有任何疑惑可以回復我~
#1

麓鹿不迷路

啊，我就是這個原因，謝謝
2018-06-20 回復 有任何疑惑可以回復我~

沒錯，就你一個人

0 回復 有任何疑惑可以回復我~
#1

yuqingzhijie3596863

你這種豬就別說話了吧
2017-11-23 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消
進擊Node.js基礎（二）
  • 參與學習       76735    人
  • 解答問題       242    個

本教程帶你攻破 Nodejs，讓 JavaScript流暢運行在服務器端

進入課程

小球移動速度

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號