使用Javascript移動元素

Question

我試圖制作一個網頁，當您單擊鏈接時，鏈接每100毫秒對角移動一次。

所以我有了我的Javascript，但是現在當我單擊鏈接時，沒有任何反應

另外，有人知道我可以使用Javascript IDE來確保代碼中沒有錯誤嗎？

PS：有人知道為什么我的元素無法拉伸以適合div元素的整個200px x 200px嗎？ 僅當鏈接的寬度與其父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元素的寬度，需要display: block; a元素display: block; 不是它們的默認display: inline; 。

在我看來，了解運行時錯誤更為重要，並且IDE不能捕獲DOM錯誤或比語法更復雜的東西。 在瀏覽器中使用錯誤日志記錄（Firefox稱為錯誤控制台）。 這還將捕獲語法錯誤等開發中錯誤。

這是需要強調的最重要的一點： block.style.left和block.style.top不僅是其中包含隱式像素值的數字。 將其設置為不帶單位后綴的數字絕對不會做任何事情。 設置left和top時，您需要添加%或px或任何單位。

當獲取當前值時，如var x = ...和var y = ... ，您需要手動使用Number()來獲取字符串的數字部分。

另外，我相信您的意思是|| block == null || 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而不是style對象設置的。 我使用我的庫獲取可在幾種情況下運行的樣式，並自動捕獲該樣式。 因此，將這些行更改為（這可能並不完全正確，但是會使事情發生變化）：

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

同樣，這是錯誤的（您從來沒有聲明過“ self”，而且您在這里也不需要它； JS區分大小寫，SetInterval沒有上限；傳遞函數 ，而不是函數結果 ）：

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/