0

当检测到按键事件时，我尝试更改元素的边距，但我遇到了一个小问题，因为它没有正确执行代码。我试图在按下左箭头时减小边距，并在按下右箭头时增加边距。

这是代码：

<!DOCTYPE html>

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <meta charset="utf-8" />
        <title>Game</title>
        <style>
            body{
                background: #f00;
            }
            hr{
                width: 1px;
                height: 600px;
            }
            .player{
                text-align: center;
                width: 200px;
                height: 20px;
                background: #0005ff;
                margin: 600px 550px 0px;
            }
        </style>
        <script>
            var player = document.getElementById('player')
            var num = 550
            $(document).keydown(function (event) {
                switch (event.keyCode) {
                    // Left Arrow
                    case 37: num++;
                             document.getElementById('player').style.margin = '600px ' + num + 'px' + ' 0px';
                             break;
                    // Right Arrow
                    case 39: num--;
                             document.getElementById('player').style.margin = '600px ' + num + 'px 0px';
                             break;
                }
            });
        </script>
    </head>
    <body>
        <div class="player">
            Player
        </div>
    </body>
</html>

我的问题是如何修复代码以使其正常工作，当我单击左箭头时，他向左移动并与另一个相同？

谢谢。

编辑：

我得到了答案，现在我唯一的问题是我怎样才能让它移动得更快？

4

1 回答 1

1

改变

<div class="player">
    Player
</div>

至

<div id="player">
    Player
</div>

它不起作用的原因是你在document.getElementById(id)元素有一个类时调用。

于 2013-06-16T21:16:22.173 回答