调试一个简单的Javascript错误_Javascript

调试一个简单的Javascript错误

javascript

调试一个简单的Javascript错误,javascript,Javascript,我试图使用java脚本向下移动Id为（左上角）的div容器，但我的java脚本代码有一个问题。从逻辑上讲，它应该能工作，有人能检查一下吗 HTML代码 <html> <title>Test</title> <head> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascr

我试图使用java脚本向下移动Id为（左上角）的div容器，但我的java脚本代码有一个问题。从逻辑上讲，它应该能工作，有人能检查一下吗

HTML代码

<html>
    <title>Test</title>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
        <script type="text/javascript" src="javascript.js"></script>
    </head>
    <body>
        <div  id="container">
            <div onclick="start()" id="topleft"></div>
            <div id="topright"></div>
            <div id="bottomleft"></div>
            <div id="bottomright"></div>
        </div>

    </body>
</html>

JavaScript代码

mt=0;
function move(){
    topleft=document.getElementById("topleft");
    for (n=0;n<=175;n++){
        topp=topleft.style.top;
        topp=parseInt(topp);
        topp++
        topleft.style.top=topp+"px"
    }
}

function start(){
    setInterval("move()",1);
}

mt=0；
函数move（）{
topleft=document.getElementById（“topleft”）；
对于（n=0；n该代码有几个问题，我怀疑#4和#7是最直接的问题：
setInterval（“move（）”1）；
是一个语法错误，这就是它不运行的原因。在1
之前需要一个逗号：（您已经编辑了问题以解决此问题）

如果不声明mt
、n
、topleft
、和topp
变量，您就会陷入困境。始终声明变量，并在最内部的范围内声明它们
将字符串传递到setInterval
是一种糟糕的做法；它需要引擎进行隐式编译，而编译的范围可能不是您所期望的（尽管引用了您的代码-例如，如果move
真的是一个全局的-它会工作）。只需使用函数引用：
setInterval(move, 1);


您正在topleft.style.top
上使用parseInt
（间接地），但是topleft
元素没有任何style
属性，因此topleft.style.top
是“
。因此您得到的是NaN
，这是没有用的。元素上的style
属性不反映CSS，它只反映元素的style
属性中的内容。查看（对于基于标准的浏览器）或（对于较旧的IE）
几乎总是最好将基数与parseInt
一起使用，例如：parseInt（topp，10）
而不仅仅是parseInt（topp）

FWIW，如果setInterval
有效，那么该代码将非常非常频繁地运行（虽然不是每毫秒一次；引擎应该将4
以下的值视为4
，并且在任何情况下，它都取决于实现和单个JavaScript UI线程不忙于其他事情）
对循环中的元素进行一系列更改而不向浏览器屈服不会使这些元素产生动画效果。与其循环，不如记住n
，每次调用时只移动元素一位。每次move
返回时，浏览器都有机会更新UI
下面是一个我所做的最小修改的示例（不处理旧IE的currentStyle
）：|

试验
#容器{
宽度：400px；
高度：400px；
背景色：红色；
保证金：0自动；
职位：相对
}
#右上，#左上，#右下，#左下{
宽度：50px；
高度：50px；
背景色：黑色；
位置：绝对位置；
}
#右下，#左下{
底部：0；/*175*/
}
#右上，#左上{
顶部：0；/*175*/
}
#左下，#左上{
左：0；/*175*/
}
#右下，#右上{
右：0；/*175*/
}
（功能（）{
无功延迟=10；
var topleft=document.getElementById（“topleft”）；
var currentPos=parseInt（getComputedStyle（左上角）.top，10）；
addEventListener（“单击”，函数（）{
//开始
设置超时（移动、延迟）；
});
函数move（）{
如果（当前位置如T.J.Crowder所述，则更换
function start(){
    setInterval("move()"1);
}

到
我发现了这个错误，但是如果我改为逗号而不是1，例如100或1000，代码不起作用，如果你有时间想帮助我，你能给我skype吗？） THX@user3033268：我怀疑编辑中的#4是您的主要问题。祝您好运，非常感谢您抽出时间。@Chris：抱歉，我错过了您通过单击启动动画的机会。我已更新了答案，以显示如何在不创建全局函数的情况下执行此操作。@Chris:这说明parseInt
基数字符串应该是十进制的。10是十进制的。8是八进制的。16是十六进制的。依此类推。如果您不提供它，parseInt将根据字符串中的前两个字符决定；如果您知道所需的基数（在本例中为十进制），最好是提供它。@Bram Vanroy:事实上，OP发布了一个完整的、自包含的示例，这真的很有帮助。如果它太长，当然需要编辑，但它不是。我已经回滚了您的编辑。但我仍然不明白为了使这段代码正常工作，我到底应该做些什么更改？请原谅编程技巧不好。。。
setInterval(move, 1);

<!doctype html>
<html>
  <title>Test</title>
  <head>
    <style>
      #container {
        width: 400px;
        height: 400px;
        background-color: red;
        margin: 0 auto;
        position: relative
      }
      #topright, #topleft,#bottomright, #bottomleft {
        width: 50px;
        height: 50px;
        background-color: black;
        position: absolute;
      }
      #bottomright, #bottomleft {
        bottom:0;/*175*/
      }
      #topright, #topleft {
        top:0; /*175*/
      }
      #bottomleft, #topleft {
        left:0; /*175*/
      }
      #bottomright, #topright {
        right:0; /*175*/
      }
    </style>
  </head>
  <body>
    <div  id="container">
      <div id="topleft"></div>
      <div id="topright"></div>
      <div id="bottomleft"></div>
      <div id="bottomright"></div>
    </div>
    <script>
      (function() {
        var delay = 10;
        var topleft = document.getElementById("topleft");
        var currentPos = parseInt(getComputedStyle(topleft).top, 10);

        topleft.addEventListener("click", function() {
          // Start
          setTimeout(move, delay);
        });

        function move(){
          if (currentPos <= 175) {
            ++currentPos;
            topleft.style.top = currentPos + "px";
            setTimeout(move, delay);
          }
        }
      })();
    </script>
  </body>
</html>

function start(){
    setInterval("move()"1);
}

function start(){
    setInterval(move, 1);
}