用键盘控制div运动

最新推荐文章于 2024-10-10 09:56:47 发布

源@

最新推荐文章于 2024-10-10 09:56:47 发布

阅读量111

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/weixin_48727085/article/details/107627247

版权

<!DOCTYPE HTML>
<html lang = "en">
	<head>
		<meta charset = "UTF-8"/>
		<style>
		</style>
	</head>
	<body>
		<script>
			var div  = document.createElement('div');
			document.body.appendChild(div);
			div.style.width = '100px';
			div.style.height = '100px';
			div.style.backgroundColor = 'red';
			div.style.position = 'absolute';
			div.style.left = '0px';
			div.style.top = '0px';
			document.onkeydown = function(e){
				switch(e.which){
					case 38:
						div.style.top = parseInt(div.style.top) - 10 + 'px';
						break;
					case 40:
						div.style.top = parseInt(div.style.top) + 10 + 'px';
						break;
					case 37:
						div.style.left = parseInt(div.style.left) - 10 + 'px';
						break;
					case 39:
						div.style.left = parseInt(div.style.left) + 10  + 'px';
						break;
				}
			}
		</script>
	</body>
</html>