js键盘事件--实现div移动

野性酷女 2022-11-29 14:29 226阅读 0赞

用键盘事件实现div移动

键盘事件：onkeydown 按键按下，连续按下时，第一次和第二次会停顿一下，防止误操作  
onkeyup 按键松开  
这两个事件一般会绑定给可以获取焦点的一些元素或者document元素  
可通过keyCode来获取按键的编码  
除此之外还有altkey,shiftkey,ctrlkey  
keyCode 37左 38上 39 右 40下  
js代码如下：

<script type="text/javascript">
    			/*
    				 键盘事件：onkeydown 按键按下，连续按下时，第一次和第二次会停顿一下，防止误操作
    				 onkeyup 按键松开
    				 这两个事件一般会绑定给可以获取焦点的一些元素或者document元素
    				 可通过keyCode来获取按键的编码
    				 除此之外还有altkey,shiftkey,ctrlkey
    				 keyCode 37左 38上 39 右 40下
    				 * */
    			window.onload = function(){
    				var box16 = document.getElementById('box16');
    				var speed = 10;
    				document.onkeydown = function(event){
    					event = event || window.event;
    					if(event.keyCode == 37){//向左
    						box16.style.left = box16.offsetLeft-speed+"px";
    					}else if(event.keyCode == 40){//向下
    						box16.style.top = box16.offsetTop+speed+"px";
    					}else if(event.keyCode == 39){//向右
    						box16.style.left = box16.offsetLeft+speed+"px";
    					}else{//向上
    						box16.style.top = box16.offsetTop-speed+"px";
    					}
    					};	
    			};
    		</script>

html代码如下：

<body>
    		<div id="box16"></div>
    	</body>

样式代码如下：

<style type="text/css">
    			#box16{
    				width: 100px;
    				height: 100px;
    				background-color: red;
    				position: relative;
    			}
    			
    		</style>

发表评论取消回复

表情：

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

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

相关阅读

相关 JS实现键盘移动光标

通过键盘的上下左右，实现对光标的移动，当点击回车时，进入所选的对应页面。左边是菜单栏，右边是具体数据。 ![Center][] 左边的菜单栏布局 ![Ce

╰半橙微兮°/ 2023年10月17日 08:29/ 0 赞/ 145 阅读

相关 js 键盘事件

键盘事件：简单点就是检测用户在键盘上按了什么键 <!DOCTYPE html> <html> <head>

Myth丶恋晨/ 2023年10月06日 13:43/ 0 赞/ 49 阅读

相关 JavaScript基础14-day16【事件委派、事件绑定、事件传播、滚轮事件、键盘事件、键盘移动div】

> 学习地址： > > 1. [谷粒学院——尚硅谷][Link 1] > 2. [哔哩哔哩网站——尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,J

迷南。/ 2023年01月09日 15:58/ 0 赞/ 233 阅读

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

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

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

相关前端---js（自学笔记26)（滚轮的事件、键盘事件、键盘移动div）

滚轮的事件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <

不念不忘少年蓝@/ 2022年12月01日 14:22/ 0 赞/ 216 阅读

相关 js键盘事件--实现div移动

用键盘事件实现div移动键盘事件：onkeydown 按键按下，连续按下时，第一次和第二次会停顿一下，防止误操作 onkeyup 按键松开这两个事件一般会绑定给可

野性酷女/ 2022年11月29日 14:29/ 0 赞/ 227 阅读

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

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

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

相关 js实现div移动

之后想做一个可以展示数据存储位置变化的示意图，前期先做简单的两列互换。首先先把格子画出来，因为想做列的移动，所以一列是一个div。 HTML： <div cl

墨蓝/ 2022年03月15日 02:26/ 0 赞/ 444 阅读

相关 JS设置div根据键盘移动

使用js设置div根据方向键“上、下、左、右”方向键移动，代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T

ゝ一世哀愁。/ 2022年02月21日 05:21/ 0 赞/ 302 阅读

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

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

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