Question

我正在尝试创建一个网页，当您点击链接时，该链接每100毫秒对角移动一次。

所以我有我的Javascript，但是现在当我点击链接时没有任何反应

此外，有没有人知道我可以用来确保我的代码中没有错误的Javascript IDE？

PS：有没有人知道为什么我的元素不能伸展以适应整个200px乘以200px的div元素？当链接的宽度应与父div元素的宽度相同时，链接很小。

使用新建议编辑，但仍然无法移动。

<script LANGUAGE="JavaScript" type = "text/javascript">
<!--
    var block         = null;
    var clockStep     = null;
    var index         = 0;
    var maxIndex      = 6;
    var x             = 0;
    var y             = 0;
    var timerInterval = 100;  // milliseconds
    var xPos          = null;
    var yPos          = null;

    function moveBlock()
    {
        if ( index < 0 || index >= maxIndex || block == null || clockStep == null ) 
        { 
            clearInterval( clockStep );
            return;
        }

        block.style.left = xPos[index] + "px";
        block.style.top  = yPos[index] + "px";
        index++;
    }

    function onBlockClick( blockID )
    {
        if ( clockStep != null )
        {
            return;
        }

        block = document.getElementById( blockID );
        index = 0;
        x = parseInt( block.style.left, 10 );
        y = parseInt( block.style.top, 10 );
        xPos  = new Array( x+10, x+20, x+30, x+40, x+50, x+60 );
        yPos  = new Array( y-10, y-20, y-30, y-40, y-50, y-60 );

        clockStep = self.SetInterval( moveBlock(), timerInterval );
    }
-->
</script>
<style type="text/css" media="all">
    <!--
    @import url("styles.css");

    #blockMenu { z-index: 0; width: 650px; height: 600px; background-color: blue; padding: 0; }

    #block1 { z-index: 30; position: relative; top: 10px;  left: 10px; background-color: red; width: 200px; height: 200px; 
              margin: 0; padding: 0; /* background-image: url("images/block1.png"); */ }
    #block2 { z-index: 30; position: relative; top: 50px; left: 220px; background-color: red; width: 200px; height: 200px; 
              margin: 0; padding: 0; /* background-image: url("images/block1.png"); */ }
    #block3 { z-index: 30; position: relative; top: 50px; left: 440px; background-color: red; width: 200px; height: 200px; 
              margin: 0; padding: 0; /* background-image: url("images/block1.png"); */ }
    #block4 { z-index: 30; position: relative; top: 0px; left: 600px; background-color: red; width: 200px; height: 200px; 
              margin: 0; padding: 0; /* background-image: url("images/block1.png"); */ }

    #block1 a { display: block; width: 100%; height: 100%; }
    #block2 a { display: block; width: 100%; height: 100%; }
    #block3 a { display: block; width: 100%; height: 100%; }
    #block4 a { display: block; width: 100%; height: 100%; }

    #block1 a:hover { background-color: green; }
    #block2 a:hover { background-color: green; }
    #block3 a:hover { background-color: green; }
    #block4 a:hover { background-color: green; }

    #block1 a:active { background-color: yellow; }
    #block2 a:active { background-color: yellow; }
    #block3 a:active { background-color: yellow; }
    #block4 a:active { background-color: yellow; }

    -->
</style>

Answer 1

修复所需的错误

要填充div元素的宽度，a元素必须为display: block;，而不是默认display: inline;。

在我看来，了解运行时错误更重要，IDE不会捕获DOM错误或任何比语法更复杂的错误;在浏览器中使用错误日志记录（Firefox称为错误控制台）。这也会捕获语法错误等开发中的错误。

这是最重要的一点：block.style.left和block.style.top不仅仅是隐含像素值的数字。将其设置为没有单位后缀的数字将绝对不会做任何事情。在设置%和px时，您需要添加left或top或任何单位。

获取当前值时，如var x = ...和var y = ...，您需要手动Number()获取字符串的数字部分。

另外，我认为您的意思是|| block == null，而不是=，这会将block设置为null。

<强>提示

您可以使用moveBlock代替"moveBlock();"作为setTimeout的参数。这避免了将字符串解析为代码，并避免了范围问题（尽管在此示例中不是moveBlock是全局的）。

我知道您有一系列值，x和y每次都会移动10。我假设你想以45度角移动。如果是这样，即使修复了所有错误，这仍然无法正常工作，因为x是百分比，而y是以像素为单位。

Answer 2

您应该像上面的其他变量一样声明上面的x和y。它可能有用，但令人困惑。

在你的setTimeout中

，使用moveBlock，而不是“moveBlock（）” - 它将保存将字符串评估为代码的步骤。

block.style.left将返回包含“px”的字符串 - 它不是数字。你可以这样做：

x = Number(x);
//or 
x = parseInt(x, 10);

设置位置时，请记住添加“px”：

block.style.left = xPos[index] + "px";

编辑：

好的，关键问题是'style.left'没有读取，因为它是用CSS而不是样式对象设置的。我使用我的库来获得贯穿几个场景并自动捕获的样式。因此，将这些行更改为（这可能不完全正确但会使事情发生变化）：

x = parseInt( node.style.left, 10 ) || 0;
y = parseInt( node.style.top, 10 ) || 0;

另外，这是错误的（你从来没有宣称'自'，你不需要它在这里; JS是区分大小写的，SetInterval没有上限;传递函数，而不是< strong>功能结果）：

clockStep = self.SetInterval( moveBlock(), timerInterval ); // <-- result of moveBlock
// change to:
 clockStep = setInterval( moveBlock, timerInterval );  // <-- the function moveBlock

在开发期间，你应该删除可能阻塞代码的if（）语句，只是简单地计算一下 - ;在那里。当你有20个错误的东西时，调试代码真的很难。写一行，测试。写一行，测试。

您在脚本和样式块中有HTML注释。这是从1998年开始的。虽然他们没有完整地伤害任何东西，但在过去我不小心编辑了我的代码并删除了其中的一个，这会让一切都搞砸 - 你的IDE，浏览器 - 因为他们不会知道什么是错的，你不会得到一个好的错误信息。

LANGUAGE =“JavaScript”不再使用，浪费了字节。

为了帮助加快开发速度，请添加以下内容：

window.onloadfunction(){
    onBlockClick('block1')
}

这将立即执行您的代码进行测试，您不必每次都点击。

最后， 强烈推荐 您使用 Firefox和Firebug 。没有它的开发就像试图用拳击手套在瓶子里建造一艘船。使用console.log（block.style.left）会显示你没有设置。错误消息会告诉您SetInterval和moveBlock（）不正确。您需要记住在生产之前删除console.logs。或 ...（无耻的插件）...使用我的JavaScript控制台修复库，它将为您做到这一点：http://clubajax.org/javascript-console-fix-v2-now-with-ios/

使用Javascript使元素移动

2 个答案: