Question

我有一些javascript应该每400毫秒移动我的div元素。从调试我发现我的所有代码都工作，除非我去移动div元素。即，这段代码：

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

我不确定为什么这段代码不会移动我的div？我应该使用不同的方法（除了object.style.top等）来移动我的div吗？

我的java脚本：

<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 = 400;  // milliseconds
    var xPos          = null;
    var yPos          = null;

    function moveBlock()
    {
        //alert( index ); // if you use this you will see my setInterval works fine
        if ( index < 0 || index >= maxIndex || block === null || clockStep === null ) 
        { 
            clearInterval( clockStep );
            clockStep = null;
            return;
        }

        block.innerHTML = "yellow";            // this works (just a debug test) so I know block points to the correct HTML element
        block.style.left = xPos[index] + "px"; // this doesn't work
        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 = setInterval( "moveBlock()", timerInterval );
    }
-->
</script>

Answer 1

block.style.left和block.style.top的值未设置，除非你使用一个绝对定位的div，左边和上边都有预设值（事实上，你的数组填充了NaN当我测试时）。例如，代码可以正常使用这样定义的div：

<div id="div1" style="position:absolute;left:100px;top:100px;
        width:150px;height:150px;background-color:yellow;"
    onclick="onBlockClick(this.id);">
HI
</div>

使用Javascript移动div不会工作

1 个答案: