为什么页头改成<!DOCTYPE html>动画就无法运行了？
为什么页头写成<!DOCTYPE html>，动画就不能正常运行。
页头写成<!DOCTYPE>，动画就正常运行。
动画的js以及html都是正确的，只是页头一改就跑不了了。
配图错了，请忽略~
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>promise animation</title>
<style>
.ball {
width: 40px;
height: 40px;
border-radius: 20px;
}
.ball1 {
background: red;
}
.ball2 {
background: yellow;
}
.ball3 {
background: green;
}
</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 mymarginLeft = parseInt(ball.style.marginLeft, 10);
if (mymarginLeft === distance) {
cb && cb()
} else {
if (mymarginLeft < distance) {
mymarginLeft++;
} else {
mymarginLeft--;
}
ball.style.marginLeft = mymarginLeft;
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>
