我是一名学生并且正在学习编码。我从互联网上下载了这个简单的HTML Javascript代码。它通过按4箭头键在屏幕上移动图像。这在浏览器上工作正常,但在JSFiddle上不起作用。我是初学者。这个问题已在论坛上提出。我查看了答案,但没有解决我的问题。
我从论坛得到的答案是:
任何帮助表示感谢和赞赏:
的jsfiddle: https://jsfiddle.net/ThatBoyCoder/s85wtqL3/
< ------ Code ------->
<html>
<head>
<title>Test Move Object</title>
<script type="text/javascript">
function leftArrowPressed() {
var element = document.getElementById("image1");
element.style.left = parseInt(element.style.left) - 25 + 'px';
}
function rightArrowPressed() {
var element = document.getElementById("image1");
element.style.left = parseInt(element.style.left) + 25 + 'px';
}
function upArrowPressed() {
var element = document.getElementById("image1");
element.style.top = parseInt(element.style.top) - 25 + 'px';
}
function downArrowPressed() {
var element = document.getElementById("image1");
element.style.top = parseInt(element.style.top) + 25 + 'px';
}
function moveSelection(evt) {
switch (evt.keyCode) {
case 37:
leftArrowPressed();
break;
case 39:
rightArrowPressed();
break;
case 38:
upArrowPressed();
break;
case 40:
downArrowPressed();
break;
}
};
function domReady()
{
window.addEventListener('keydown', moveSelection);
}
</script>
</head>
<body onload="domReady()" onkeydown="" onkeyup="" bgcolor='yellow'>
Test
<img id="image1" src="http://placekitten.com/69/69" style="position:absolute;left:0; top:0;" height="50" width="50">
</body>
end html
</html>