gpt4 book ai didi

Javascript 无法访问 HTML(左右移动对象)

转载 作者:行者123 更新时间:2023-11-30 16:11:34 25 4
gpt4 key购买 nike

我的文件:

index.html
client
css
style.css
js
javascript.js

index.html:

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>blablabla</title>
<link rel="stylesheet" type="text/css" href="client/css/style.css">
<script type="text/javascript" src="client/js/javascript.js"></script>

</head>
<body>
<div id="container">
<div id="guy"></div>
</div>

</body>
</html>

javascript.js

var guy=document.getElementById('guy');
var container=document.getElementById('container');

var guyLeft=0;

function anim(e){
if(e.keyCode==39){
guyLeft +=2;
guy.style.left = guyLeft + 'px';

}
if(e.keyCode==37){
guyLeft -=2;
guy.style.left = guyLeft + 'px';
}
}
document.onkeydown =anim;

样式.css

#container{
height:400px;
width:600px;
outline:1px solid black;
position: relative;
}
#guy{
position: absolute;
height:50px;
width:50px;
outline:1px solid black;
background-color:red;
left:0;
}

1) 所以大家请帮忙.. 我只想左右移动对象.. 当我把代码放在 index.html 之间时它可以工作但在单独的 javascript.js 类中不起作用。感谢您的帮助。

最佳答案

1) 您必须在页面底部加载 JavaScript。

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>blablabla</title>
<link rel="stylesheet" type="text/css" href="client/css/style.css">
</head>
<body>
<div id="container">
<div id="guy"></div>
</div>
<script type="text/javascript" src="client/js/javascript.js"></script>
</body>
</html>

2)上下移动:

var guy = document.getElementById('guy');
var container = document.getElementById('container');

var guyLeft = 0;
var guyTop = 0;

function anim(e){
if(e.keyCode==39){
guyLeft +=2;
guy.style.left = guyLeft + 'px';

}
if(e.keyCode==37){
guyLeft -=2;
guy.style.left = guyLeft + 'px';
}

// UP
if(e.keyCode==38) {
guyTop -=2;
guy.style.top = guyTop + 'px';
}

// DOWN
if(e.keyCode==40) {
guyTop +=2;
guy.style.top = guyTop + 'px';
}
}

document.onkeydown = anim;

你应该使用 console如果您想捕获 JavaScript 中的缺陷和错误。

关于Javascript 无法访问 HTML(左右移动对象),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36166307/

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