暑假学前端之JS篇

最新推荐文章于 2024-05-03 17:58:21 发布

VIP文章 _语义错误

最新推荐文章于 2024-05-03 17:58:21 发布

阅读量136

点赞数

分类专栏： JavaScript 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_66451927/article/details/125531917

版权

01.div移动练习

视频第123集

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>键盘控制div移动练习</title>
		<style>
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
		</style>
		<script>
			/* 
             使得div可以根据不同的方向键向不同的方向移动
			 按左键，div向左移，以此类推
			 */
			window.onload = function(){
				// 为document绑定一个按键按下事件
				document.onkeydown = function(event){
					event = event || window.event;
					
					// 定义一个变量，来表示移动速度
					var speed = 10;
					// 加速度功能，如果用户按了ctrl，速度加快
					if(event.ctrlKey){
						speed = 50;
					}
					
					// console.log(event.keyCode);
					// 左上右下（顺时针方向）：37-40
					switch(event.keyCode){
						case 37:
							// alert("左");左移left值减小
							box1.style.left = box1.offsetLeft - speed +"px";
							break;
						case 38:
							// alert("上");
							box1.style.top = box1.offsetTop - speed +"px";
							break;
						case 39:
							// alert("右");
							box1.style.left = box1.offsetLeft + speed +"px";
							break;
						case 40:
							// alert("下");
							box1.style.top = box1.offsetTop + speed +"px";
							break;
					}
				};
			};
		</script>
	</head>
	<body>
		<div id="box1"></div>
	</body>
</html>

程序存在缺点是前面提到的按键盘第一第二下为防误触会卡一下，后面会解决这个问题

第124集