                        課程
                    
                        /前端開發
                        
                            /Node.js
                        
                        /進擊Node.js基礎（二）

為什么頁頭改成<!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>