一、小球运动普通写法
querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
- 获取文档中第一个 <p> 元素:document.querySelector("p");
- 获取文档中 class="example" 的第一个 <p> 元素: document.querySelector("p.example");
-
获取文档中有 "targ
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Promise animation</title> <style> .ball{width: 40px; height: 40px; border-radius: 20px; } .ball1{background: crimson;} .ball2{background: darkorange;} .ball3{background: darkgreen;} </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 animate(ball,distance,cb){//球对象,移动位置,回调函数 setTimeout(function(){ var marginLeft = parseInt(ball.style.marginLeft,10); //表示以10为基数 if (marginLeft === distance){ //当球运动到期望地点 cb && cb(); }else{ if(marginLeft <distance){ marginLeft++; }else{ marginLeft --; } //debugger ball.style.marginLeft = marginLeft +'px'; //球位置改变 animate(ball,distance,cb);//重复调用 } },13); }; 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>
et" 属性的第一个 <a> 元素:document.querySelector("a[target]")
二、Promise方法实现
首先nodeJS安装目录 :E:\nodeJS\nodejs\node_modules\npm\node_modules 下安装 bluebird库
然后在 node_modules下就可以找到bluebird文件夹,找到bluebird.js引入项目
<script src="bluebird.js"></script> 然后在浏览器中就会有一个全局变量 Promise
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Promise animation</title>
<style>
.ball{width: 40px; height: 40px; border-radius: 20px; }
.ball1{background: crimson;}
.ball2{background: darkorange;}
.ball3{background: darkgreen;}
</style>
<script src="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>
var ball1 = document.querySelector('.ball1');
var ball2 = document.querySelector('.ball2');
var ball3 = document.querySelector('.ball3');
var Promise = window.Promise;
function promiseAnimate(ball,distance){
return new Promise(function(resolve,reject){
function _animate(){ //animate加下划线,变为私有函数
setTimeout(function(){
var marginLeft = parseInt(ball.style.marginLeft,10); //表示以10为基数
if (marginLeft === distance){ //当球运动到期望地点
resolve() ; //<====================注意带()
}else{
if(marginLeft <distance){
marginLeft++;
}else{
marginLeft --;
}
ball.style.marginLeft = marginLeft +'px'; //球位置改变
_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)
})
</script>
</body>
</html>