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

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

課程源碼及容易出現的問題-20180919

1、課程的源碼。

2、課程中容易出現的問題。

正在回答

3 回答

2、常見問題：

（1）現在的nodejs版本已內置Promise，不用安裝bluebird。

（2）margin-left:0，樣式要寫成內聯樣式，不然無法通過ball.style.marginLeft獲取到值。

（3）如果是html5,<!DOCTYPE html>，ball.style.marginLeft = marginLeft + 'px',后面要加'px'，不然marginLeft樣式設置失敗，導致每次重新取到的marginLeft值都是0，球不會動。

（4）marginLeft === distance時，執行resolve(), 而不是只寫resolve。

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

1、課程源碼如下：

<!DOCTYPE?html>
<html?lang="en">
<head>
??<meta?charset="utf-8">
??<meta?content="width=device-width,?initial-scale=1,?maximum-scale=1,?user-scalable=no"?name="viewport">
??<meta?name="format-detection"?content="telephone=no">
??<title>promise?animation</title>
??<style>
?.ball?{
??????width:40px;
??????height:40px;
??????border-radius:20px;
????}
????.ball1?{
??????background:#f00;
????}
????.ball2?{
??????background:#ff0;
????}
????.ball3?{
??????background:#0f0;
????}
??</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');
??var?ball2?=?document.querySelector('.ball2');
??var?ball3?=?document.querySelector('.ball3');

??function?promiseAnimate(ball,?distance)?{
????return?new?Promise(function?(resolve,?reject)?{
??????function?_animate()?{
????????setTimeout(function?()?{
??????????var?marginLeft?=?parseInt(ball.style.marginLeft,?10);
??????????if?(marginLeft?===?distance)?{
????????????//?cb?&&?cb();
?????????????resolve();
??????????}?else?{
????????????marginLeft?<?distance???marginLeft++?:?marginLeft--;
????????????ball.style.marginLeft?=?marginLeft?+?'px';
????????????????//?animate(ball,?distance,?cb);
?????????????????_animate();
??????????}
????????},?13);
??????}
??????_animate();
????});
??}

??promiseAnimate(ball1,?100)
?????.then(function?()?{
??????????return?promiseAnimate(ball2,?200);
????????})
?????.then(function?()?{
??????????return?promiseAnimate(ball3,?300);
????????})
?????.then(function?()?{
??????????return?promiseAnimate(ball3,?150);
????????})
?????.then(function?()?{
??????????return?promiseAnimate(ball2,?150);
????????})
?????.then(function?()?{
??????????return?promiseAnimate(ball1,?150);
????????})

?//??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>


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

aSuncat 提問者

與1樓回答的代碼一樣，這里重復回答了。
2018-09-19 回復 有任何疑惑可以回復我~

1、課程源碼如下：

<!DOCTYPE?html>
<html>
<head>
??<meta?charset="utf-8">
??<meta?content="width=device-width,?initial-scale=1,?maximum-scale=1,?user-scalable=no"?name="viewport">
??<meta?name="format-detection"?content="telephone=no">
??<title>promise?animation</title>
??<style>
?.ball?{
??????width:40px;
??????height:40px;
??????border-radius:20px;
????}
????.ball1?{
??????background:#f00;
????}
????.ball2?{
??????background:#ff0;
????}
????.ball3?{
??????background:#0f0;
????}
??</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');
??var?ball2?=?document.querySelector('.ball2');
??var?ball3?=?document.querySelector('.ball3');

??function?promiseAnimate(ball,?distance)?{
????return?new?Promise(function?(resolve,?reject)?{
??????function?_animate()?{
????????setTimeout(function?()?{
??????????var?marginLeft?=?parseInt(ball.style.marginLeft,?10);
??????????if?(marginLeft?==?distance)?{
????????????//?cb?&&?cb();
?????????????resolve();
??????????}?else?{
????????????marginLeft?<?distance???marginLeft++?:?marginLeft--;
????????????ball.style.marginLeft?=?marginLeft?+?'px';
????????????//?animate(ball,?distance,?cb);
?????????????_animate();
??????????}
????????},?13);
??????}
??????_animate();
????});
??}

??promiseAnimate(ball1,?100)
?????.then(function?()?{
??????????return?promiseAnimate(ball2,?200);
????????})
?????.then(function?()?{
??????????return?promiseAnimate(ball3,?300);
????????})
?????.then(function?()?{
??????????return?promiseAnimate(ball3,?150);
????????})
?????.then(function?()?{
??????????return?promiseAnimate(ball2,?150);
????????})
?????.then(function?()?{
??????????return?promiseAnimate(ball1,?150);
????????})

?//??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>


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

舉報

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

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

進入課程

課程源碼及容易出現的問題-20180919

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

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

 幫助反饋 APP下載

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

 公眾號

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