<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

 <script src="http://apps.bdimg.com/libs/bluebird/1.2.2/bluebird.js"></script>

<style>

*{margin:0; padding:0;}

.div1{width:50px; height:50px; background:red; border-radius:50%; margin-top:10px; margin-left:0;}

.div2{width:50px; height:50px; background:yellow; border-radius:50%; margin-top:10px; margin-left:0;}

.div3{width:50px; height:50px; background:blue; border-radius:50%; margin-top:10px; margin-left:0;}

</style>

</head>

<body>

<div style="margin:20px; position:relative">

<div class="div1"></div>

<div class="div2"></div>

<div class="div3"></div>

</div>

<script>

window.onload = function(){

/*function move(obj, dis, cb){

   setTimeout(function(){

      var marginLeft = parseInt(obj.offsetLeft,10);

      if(marginLeft == dis) {

         cb && cb()

      } else {

         if(marginLeft < dis) {

           marginLeft++

         } else {

           marginLeft--

         }

         obj.style.marginLeft = marginLeft + 'px'

         move(obj, dis, cb)

      }

    },10)

}

move(d1,150,function(){

  move(d2,150,function(){

    move(d3, 150, function(){

      move(d3,0, function() {

        move(d2,0,function(){

          move(d1,0)

        })

      })

    })

  })

})*/

var d1 = document.querySelector('.div1')

var d2 = document.querySelector('.div2')

var d3 = document.querySelector('.div3')

var Promise = window.Promise

function promiseMove(obj,dis) {

  return new Promise(function(resolve, reject) {

    function move(){

       setTimeout(function(){

          var marginLeft = parseInt(obj.offsetLeft,10);

          if(marginLeft == dis) {

             resolve()

          } else {

             if(marginLeft < dis) {

               marginLeft++

             } else {

               marginLeft--

             }

             obj.style.marginLeft = marginLeft + 'px'

             move()

          }

        },10)

    }

    move()

  })

}

  promiseMove(d1,100)

  .then(function(){return promiseMove(d2,100) })

  .then(function(){return promiseMove(d3,100) })

  .then(function() {return promiseMove(d3,0)})

.then(function() {return promiseMove(d2,0)})

 .then(function() {return promiseMove(d1,0)})

}

</script>

</body>

</html>

　　

promise实例小球运动的更多相关文章

  1. Cocos2d-x加速度计实例：运动的小球

    下面我们通过一个实例介绍一下如果通过层加速度计事件实现访问加速度计.该实例场景如下图所示,场景中有一个小球,当我们把移动设备水平放置,屏幕向上,然后左右晃动移动设备来改变小球的位置. 下面我们再看看具 ...

  2. Promise实现小球的运动

        Promise简要说明 Promise可以处理一些异步操作:如像setTimeout.ajax处理异步操作是一函数回调的方式;当然ajax在jQuery版本升级过程中,编写方式也有所变动. P ...

  3. JavaScript实例：运动的小球

    本篇博文通过制作一个小球运动动画的实例,来学习在HTML5的画布上实现动画制作的方法,同时理解面向对象程序设计的基本思想. 1．绘制小球 先在HTML页面中设置一个画布. <canvas id= ...

  4. Windows Store App JavaScript 开发：小球运动示例

    通过前面内容的学习,相信读者已经对开发基于JavaScript的Windows应用商店应用有了一定的了解,本小节通过一个小球运动的示例来介绍如何新建一个JavaScript的Windows应用商店项目 ...

  5. 原生js小球运动

    //html代码 <input type="button" value="小球运动" /> <div></div> //js ...

  6. Win10系列：JavaScript小球运动示例

    通过前面内容的学习,相信读者已经对开发基于JavaScript的Windows应用商店应用有了一定的了解,本小节通过一个小球运动的示例来介绍如何新建一个JavaScript的Windows应用商店项目 ...

  7. surface实例-小球弹起事例

    ball.java package com.example.sufacedemo; import android.graphics.Bitmap; import android.graphics.Bi ...

  8. c语言编程实例——小球跳动

    1.预备知识 1.1 相关头文件 "#include"是c语言中用以申明所需调用的库函数或自定义函数的头文件路径及文件名.#include ""和#includ ...

  9. 笔记：promise实例+注释

    ////////////////////////////////////////////// var data = [1,2,3,4]; var promise = new Promise((reso ...

随机推荐

  1. c#-1 数据结构 定义相关 界面交互数据 Model层

    1.时间用Nullable<UInt32> 除了最初时间用DateTime TimeSpan不行. 2.其他元素也用Nullable<UInt32> 3.list集合数据绑定类 ...

  2. 好的bootstrap文章

    http://www.cnblogs.com/gamehiboy/p/5176618.html http://www.cnblogs.com/landeanfen/p/5821192.html htt ...

  3. REPEATABLE-READ下批量更新数据的问题

    1. 当前mysql的隔离级别 REPEATABLE-READ 2. 用户读取的时候或者更改的时候(通过事务)   会对 更改的数据加行锁 和 gap锁 , 最终更改完毕后 去掉锁. (行锁表示这条数 ...

  4. CAN总线通信：实现MIC-3680与F28335 CAN总线通信的设置

    博主原创: 实现MIC-3680与F28335 CAN总线通信的设置(MIC-3680CAN模块滤波使用单滤波模式): CAN2.0A协议: (使用11位标识符) <1>F28335发送, ...

  5. 承接cardboard外包，unity3d外包（北京动软— 谷歌CARDBOARD真强大）

    手把手教你玩转googlecardboard[不知道在这里发可以不?] 谷歌Google I/O开发者大会于北京时间6月26日0点在美国旧金山举行,谷歌发布了Android L手机系统:Android ...

  6. tokudb引擎磁盘空间不足导致写入失败的调查

    故障现象 2016.1.1号早上4点左右,zabbi数据库服务器报警,写入数据失败.登陆机器后检查发现磁盘空间使用95%没有用满,进去zabbix数据库,执行insert命令提示错误“errir 10 ...

  7. oracle 导库建立测试库

    由于客户要定制的关系,需要对产品的数据进行相关的修改,所以需要复制原来的库出来,然后在此基础上再进行修改.步骤如下: 在PL/SQL下操作: /*分为四步 *//*第1步:创建临时表空间  */cre ...

  8. Kylin Java RESTful API

    最近在做大数据方面的开发, 学习研究了一段时间的kylin系统, 对于前端开发需要使用 RESTful API ,但是官网并没有提供详细的Java  API. 经过几天的看文档,最终写出了 Java ...

  9. 主席树入门(区间第k大)

    主席树入门 时隔5个月,我又来填主席树的坑了,现在才发现学算法真的要懂了之后,再自己调试,慢慢写出来,如果不懂,就只会按照代码敲,是不会有任何提升的,都不如不照着敲. 所以搞算法一定要弄清原理,和代码 ...

  10. Unable to find messages file 'cscui.dll' 问题解决

    之前在工作机器上安装VS 2015卡死,结束进程,安装失败一直无法使用,昨天下班开着电脑把VS 2015卸载了,今天早上来,以前正确的项目现在生成都报错 "Unable to find me ...