JS控制按钮运动方向


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS控制按钮运动方向</title>

<input type="button" id="up" value="上" />
<input type="button" id="down" value="下" />
<input type="button" id="left" value="左" />
<input type="button" id="right" value="右" />

<input type="button" id="1500kmCOM" value="1500kmCOM" style="position:absolute; left:100px; top:100px;" />


<script type="text/javascript">
(function(){
////////////////////////
    var upx=document.getElementById("up");
    var downx=document.getElementById("down");
    var leftx=document.getElementById("left");
    var rightx=document.getElementById("right");
    var o=document.getElementById("1500kmCOM");
    upx.onclick=function(){
        y=o.style.top.replace('px','');
        y=parseInt(y);
        y-=20;
        o.style.top=y+"px";
    }
    downx.onclick=function(){
        y=o.style.top.replace('px','');
        y=parseInt(y);
        y+=20;
        o.style.top=y+"px";
        //alert(o.style.top);//
    }
    leftx.onclick=function(){
        x=o.style.left.replace('px','');
        x=parseInt(x);
        x-=20;
        o.style.left=x+"px";
    }
    rightx.onclick=function(){
        x=o.style.left.replace('px','');
        x=parseInt(x);
        x+=20;
        o.style.left=x+"px";
    }

////////////////////////
})();
</script>




程序运行结果如下,点击这里亲自运行看看