javascript - 使用 Javascript 使元素移动

Question

我正在尝试制作一个网页，当您点击一个链接时，该链接每 100 毫秒沿对 Angular 线移动一次。

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

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

PS:有谁知道为什么我的元素不能拉伸(stretch)以适应整个 200px x 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 : 内联;.

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

这是需要强调的最重要的一点:block.style.left 和 block.style.top 不仅仅是其中包含隐式像素值的数字。将它设置为一个没有单位后缀的数字将毫无用处。在设置left 和top 时，您需要添加% 或px 或任何单位。

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

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

提示

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

我知道您有一个值数组，其中 x 和 y 每次都移动 10。我假设您想以 45 度 Angular 移动。如果是这样，即使在修复所有错误后，这也不会像您预期的那样工作，因为 x 是百分比，y 是像素。