<!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. iOS_Swift初识之使用三种回调方式自定义Button

    最近在学习Swift ,发现青玉伏案大神早期用OC写的一篇博客--IOS开发之自定义Button(集成三种回调模式)  很适合用来熟悉Swift的回调方式,于是我就用Swift翻版了一下,具体实现原理 ...

  2. 35 个 Java 代码性能优化总结

    前言 代码优化,一个很重要的课题.可能有些人觉得没用,一些细小的地方有什么好修改的,改与不改对于代码的运行效率有什么影响呢?这个问题我是这么考虑的,就像大海里面的鲸鱼一样,它吃一条小虾米有用吗?没用, ...

  3. 3、C#入门第3课

    1.c#中一个解决方案 里面两个程序 怎么一个启动另一个? 我一个解决方案下,有两个工程,我想让A工程在适当时候,启动B工程,比如A中有个按钮,一点,B工程就启动了. System.Diagnosti ...

  4. ANDROID学习之路 转

    版权声明:本文为 stormzhang 原创文章,可以随意转载,但必须在明确位置注明出处!!! 这篇博客背后的故事 一路走来很不容易,刚好知乎上被人邀请回答如何自学android编程, 就借这个机会在 ...

  5. C# ListView用法详解

    一.ListView类 1.常用的基本属性: (1)FullRowSelect:设置是否行选择模式.(默认为false) 提示:只有在Details视图该属性才有意义. (2) GridLines:设 ...

  6. .NET设计规范————命名规范

    NET设计规范:约定.惯用法与模式———命名规范 前言:          最近在看<.NET设计规范:约定.惯用法与模式>一书,主要还是讲.NET的设计规范,以前对这一块也不是特别在意, ...

  7. ubuntu修改主机名

    ubuntu修改主机名   主机名在/etc/hostname文件中了,只在打开这个文件进行修改,重启计算机即可.     一.查看主机名 $ hostname  #查看主机名 cdyemail   ...

  8. MSSQL MERGE语法

    Merge的用法 Merge可以完成以下功能: 1.    两个表之间数据的更新 2.    进行进销存更新库存 3.    进行表之间数据的复制 语法说明: 1.    在语句结束后一定要用分号,否 ...

  9. 线程让出实验【RT-Thread学习笔记 4】

    API: rt_thread_yield 线程函数中调用,本线程释放MCU.如果此时有别的相同优先级的任务整处于等待状态,将获得MCU使用权. 线程让出就是给OS增加一个任务调度的机会. 创建两个线程 ...

  10. JS移动端如何监听软键盘回车事件

    移动端经常项目中会有搜索之类的功能,一般实现的是按搜索按钮进行搜索,如果要像PC端一样实现按回车键进行搜索该怎么实现呢? 方法很简单,就是在搜索框的input外面套一个form标签  注意点:form ...