JavaScript经典案例：键盘控制元素移动

淡淡的烟草味﹌ 2022-12-23 12:25 132阅读 0赞

效果展示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTY1Mzkz_size_16_color_FFFFFF_t_70_pic_center]  
CSS代码：

<style type="text/css">
    	#box {
    		position: absolute;
    		width: 100px;
    		height: 100px;
    		line-height: 100px;
    		text-align: center;
    		background-color: #FFEB3B;
    	}
    </style>

HTML代码：

<div id="box">Ctrl加速</div>

JavaScript代码：

<script type="text/javascript">
    	window.onload = function() {
    		var box = document.getElementById("box");
    		var speed = 10; // 定义移动速度
    		if (event.ctrlKey) {
    			speed = 50; // 按下Ctrl加速
    		}
    		document.onkeydown = function(event) {
    			event = event || window.event;
    			switch (event.keyCode) {
    				case 38: // 上
    					box.style.top = box.offsetTop - speed + "px"
    					break;
    				case 40: // 下
    					box.style.top = box.offsetTop + speed + "px"
    					break;
    				case 37: // 左
    					box.style.left = box.offsetLeft - speed + "px"
    					break;
    				case 39: // 右
    					box.style.left = box.offsetLeft + speed + "px"
    					break;
    			}
    		}
    	}
    </script>

JavaScript加入setInterval优化效果：

<script type="text/javascript">
    	window.onload = function() {
    		var speed = 10; // 定义移动速度
    		var direction = 0; // 方向变量
    
    		// 开启定时器控制div的流畅移动
    		setInterval(function() {
    			switch (direction) {
    				case 38: // 上
    					box.style.top = box.offsetTop - speed + "px"
    					break;
    				case 40: // 下
    					box.style.top = box.offsetTop + speed + "px"
    					break;
    				case 37: // 左
    					box.style.left = box.offsetLeft - speed + "px"
    					break;
    				case 39: // 右
    					box.style.left = box.offsetLeft + speed + "px"
    					break;
    			}
    		}, 30);
    
    		var box = document.getElementById("box");
    		document.onkeydown = function(event) {
    			event = event || window.event;
    			if (event.ctrlKey) {
    				speed = 20; // 按下Ctrl加速
    			} else {
    				speed = 10; // 释放Ctrl回到初始速度
    			}
    			direction = event.keyCode; // div移动方向根据按键代码变更
    		}
    		document.onkeyup = function() {
    			direction = 0; // 释放方向键时div停止移动
    		}
    	}
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTY1Mzkz_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/89bb8344f9e84641a189fa0362898498.png

发表评论取消回复

表情：

评论列表（有 0 条评论，132人围观）

还没有评论，来说两句吧...

相关阅读