按照老師的寫法，style報(bào)錯了
Uncaught TypeError: Cannot read property 'style' of undefined ?什么情況啊
只此一生為紅顏
2016-04-18
4 回答
舉報(bào)
0/150
提交
取消
2017-04-06
?function _animate(ball,distance,cb)寫成?function _animate()，_animate()調(diào)用的時候也沒有參數(shù)
2016-06-19
我也是這個錯誤，不知道老師是怎么測試通過的，總感覺參數(shù)傳導(dǎo)有問題
2016-04-18
把方法里的參數(shù)去掉就好了.
2016-04-18
<!doctype html>
<html>
<head>
?? ?<meta charset="UTF-8">
?? ?<title>Promise animation</title>
?? ?<style>
?? ?.ball{
?? ??? ?width:40px;
?? ??? ?height:40px;
?? ??? ?border-radius: 20px;
?? ??? ?}
??? .ball1{background: red;}
??? .ball2{background: yellow;}
??? .ball3{background: blue;}
?? ?</style>
?? ?<script src="./node_modules/bluebird/js/browser/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')
?? ?function animate(ball,distance,cb){
?? ??? ?setTimeout(function(){
?? ??? ??? ?var marginLeft = parseInt(ball.style.marginLeft,10);
?? ??? ??? ?if(marginLeft==distance){
?? ??? ??? ??? ?cb && cb()
?? ??? ??? ?}
?? ??? ??? ?else{
?? ??? ??? ??? ?if(marginLeft<distance){
?? ??? ??? ??? ??? ?marginLeft++
?? ??? ??? ??? ?}
?? ??? ??? ??? ?else{
??????????????????? marginLeft--
?? ??? ??? ??? ?}
?? ??? ??? ??? ?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(){
?? ???????????????????? })
?? ???????????????? })
?? ???????????? })
?? ???????? })
?? ???? })
?? ?})*/
??? var Promise = window.Promise;
??? function promiseAnimate(ball,distance){
?? ??? ?return new Promise(function(resolve,reject){
?? ?function _animate(ball,distance,cb){
?? ??? ?setTimeout(function(){
?? ??? ??? ?var marginLeft = parseInt(ball.style.marginLeft,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>