用JavaScript编写一个用键盘实现小球向上下左右四个方向移动

最新推荐文章于 2022-05-20 16:26:32 发布

caijilaoyan

最新推荐文章于 2022-05-20 16:26:32 发布

阅读量1.6k

点赞数 2

本文链接：https://blog.csdn.net/caijilaoyan/article/details/89527257

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{padding: 0;margin: 0;}
		#box{width: 100px;height: 100px;background-color: red;position: absolute;
			border-radius: 50%;top: 100px;}
	</style>
</head>
<body>
	<div id="box"></div>
	<script type="text/javascript">
		//上38下40左37右39
		var o=document.getElementById('box');
		document.onkeydown=function (e) {
			e=e||window.event;
			//console.log(e.keyCode);//得到上下左右四个按键的键码
			//判断点击的那个按键
			if (e.keyCode==38) {
			//得到小球上边距
				var preTop=window.getComputedStyle(o,null).top;//上
		            preTop=parseInt(preTop);//去除单位
		            //在原有的上边距基础上每点击一次上键减去5px
		            o.style.top=preTop-5+'px';
			}else if (e.keyCode==40) {
			//得到小球下边距
					var preTop=windo

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

caijilaoyan

关注关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
用JavaScript编写一个用键盘实现小球向上下左右四个方向移动

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{padding: 0;margin: 0;} #box{width: 100...
复制链接

扫一扫