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

淡淡的烟草味﹌ 2022-12-23 12:25 175阅读 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 条评论，175人围观）

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

相关阅读

相关 Unity模块代码——键盘控制物体移动

把该文件挂载到指定物体上即可， public moveSpeed = 50; // function:控制移动，上(w)下(s)左(a)右(d)前(q

分手后的思念是犯贱/ 2023年09月23日 15:05/ 0 赞/ 108 阅读

相关 JavaScript经典案例：添加/删除元素类名

效果展示： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

客官°小女子只卖身不卖艺/ 2022年12月24日 10:59/ 0 赞/ 155 阅读

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

效果展示： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

淡淡的烟草味﹌/ 2022年12月23日 12:25/ 0 赞/ 176 阅读

相关 JavaScript经典案例：页面元素拖拽

效果展示： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

小鱼儿/ 2022年12月23日 11:14/ 0 赞/ 203 阅读

相关 JavaScript经典案例：网页元素跟踪移动

效果展示： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

红太狼/ 2022年12月23日 06:12/ 0 赞/ 165 阅读

相关键盘事件控制元素移动

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

Myth丶恋晨/ 2022年12月13日 14:16/ 0 赞/ 139 阅读

相关 js 实现键盘控制方块移动

需求：在网页上有一个方块，我们需要键盘上下左右键控制方块的移动。代码： <!doctype html> <html> <h

怼烎@/ 2022年05月09日 03:04/ 0 赞/ 192 阅读

相关 JS--JavaScript使用键盘事件、键盘事件属性（keyCode、charCode、target...）、使用键盘控制页面元素

键盘事件当用户操作键盘时会触发键盘事件，键盘事件主要包括下面3种类型： keydown：在键盘上按下某个键时触发。如果按住某个键，会不断触发该事件，但是Ope

墨蓝/ 2021年08月14日 00:02/ 0 赞/ 514 阅读

相关 JavaScript经典案例之按下拖拽、跟随鼠标移动

<!DOCTYPE html> <html> <head lang="en"> <meta charset="GBK">

￡神魔★判官ぃ/ 2021年07月24日 21:46/ 0 赞/ 422 阅读

相关 js如何实现利用键盘控制div移动

js如何实现利用键盘控制div移动描述： div通过键盘事件上下左右实现div块的移动

红太狼/ 2020年06月06日 18:42/ 0 赞/ 853 阅读