gpt4 book ai didi

javascript - 在按键上更改元素的边距

转载 作者:太空宇宙 更新时间:2023-11-04 14:53:55 24 4
gpt4 key购买 nike

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

代码如下:

<!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>

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

谢谢。

编辑:

我得到了答案,现在我唯一的问题是如何让它移动得更快?

最佳答案

改变

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

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

它不起作用的原因是您在元素具有类时调用 document.getElementById(id)

关于javascript - 在按键上更改元素的边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17137779/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com