为什么我的 Div 不动？

Question

我想通过一些运动来增肥 div，但它不会！帮助！

<script>

do {
 setTimeout(fly(), 10)
  function fly() {
   var i = 0;
      var left = parseInt(document.getElementById("dick").style.left);
   var top = parseInt(document.getElementById("dick").style.top);
   left++;
   top++;
   document.getElementById("dick").style.left = left + "px";
   document.getElementById("dick").style.top = top + "px"; 
 } 
}

while (i = 0);
</script>

<div id="dick" style="position:absolute; top:100px; left:100px; width:100px; height:100px; background-color:#000000;"></div>

Answer 1

因为代码中充满了逻辑错误。

setInterval(fly, 100);

function fly() {
    var i = 0,
        el = document.getElementById("dick"),
        left = parseInt(el.style.left),
        top = parseInt(el.style.top);

 el.style.left = ++left + "px";
 el.style.top = ++top + "px"; 
}

<div id="dick" style="position:absolute; top:100px; left:100px; width:100px; height:100px; background-color:#000000;"></div>

Answer 2

您应该使用 setInterval 而不是 setTimeout。另外，您应该给 setInterval 您的函数，而不是给它调用它的结果。

    setInterval(fly, 10);
    function fly() {
      console.log("flying")
        var i = 0;
        var left = parseInt(document.getElementById("dick").style.left);
        var top = parseInt(document.getElementById("dick").style.top);
        left++;
        top++;
        document.getElementById("dick").style.left = left + "px";
        document.getElementById("dick").style.top = top + "px"; 
}

检查这个 plunkr http://plnkr.co/edit/L3cid26ybpFYITfjUbmP?p=preview

Answer 3

现在的样子，您应该会在控制台中看到：

Uncaught TypeError: Cannot read property 'style' of null

首先，将您的脚本移到 <body> 标记之后；

然后，尝试编写类似这样的代码：

function fly() {
        var left = parseInt(document.getElementById("dick").style.left);
        var top = parseInt(document.getElementById("dick").style.top);
        left++;
        top++;
        document.getElementById("dick").style.left = left + "px";
        document.getElementById("dick").style.top = top + "px";
        //nsole.log(left+" and "+top);
    }

    var T_TIME = 200; // ms
    var intHandler = window.setInterval("fly()", T_TIME);

您最好使用 setInverval() 而不是带循环的 setTimeout。

为什么我的 Div 不动？

Why Won't My Div Move?

html

javascript

move