promise实例小球运动

<!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>

  

上一篇:python对landsat8数据进行辐射校正和大气校正


下一篇:静态代理设计模式|学习笔记