前言

利用js实现键盘控制div移动，同时按下ctrl和方向键可以实现加速移动。

一、基本思路

通过js中的键盘事件来对div的移动做出响应，这里以上下左右键为例，首先获取到这四个按键的Unicode编码，然后在定时器中设置对应的移动方向和速度。

二、代码分析

1.首先为div开启绝对定位

要使div能够移动，我们要提前为div开启绝对定位，这一步决定了div是否可以移动。

2.为document绑定键盘按下和抬起事件

代码如下（示例）：

// 绑定键盘按下事件
document.onkeydown = function(event){event = event || window.event;};
// 绑定键盘松开事件
document.onkeyup = function(event){event = event || window.event;};

3.获取对应键盘的Unicode编码

代码如下（示例）：

document.onkeydown = function(event){event = event || window.event;console.log(event.keyCode);
};

4.设置变量保存速度和键盘Unicode编码

这里要将其定义为全局变量

//定义变量存储键盘编码(影响移动方向)
var choice = 0;
// 定义变量存储移动速度
var speed = 10;

5.通过定时器设置移动速度和方向

这里由于div移动有四种情况，所以采用switch的方法进行处理。
定时器的作用是消除防误操作带来的卡顿问题。

代码如下（示例）：

// 开启定时器,控制div移动
setInterval(function(){/*** 37左* 38上* 39右* 40下*/switch(choice){case 37:demo.style.left = (demo.offsetLeft - speed) + "px";break;case 38:demo.style.top = (demo.offsetTop - speed) + "px";break;case 39:demo.style.left = (demo.offsetLeft + speed) + "px";break;case 40:demo.style.top = (demo.offsetTop + speed) + "px";break;}
},30);

三、整体代码

window.onload = function(){//获取div对象var demo = document.getElementById("box");//定义变量存储键盘编码(影响移动方向)var choice = 0;// 定义变量存储移动速度var speed = 10;// 绑定键盘按下事件document.onkeydown = function(event){event = event || window.event;// 按下ctrl时加速if(event.ctrlKey){speed = 50;}else{speed = 10;}choice = event.keyCode;console.log(choice);};// 绑定键盘松开事件document.onkeyup = function(event){event = event || window.event;choice = 0;//松开键盘div停止移动};// 开启定时器,控制div移动setInterval(function(){/*** 37左* 38上* 39右* 40下*/switch(choice){case 37:demo.style.left = (demo.offsetLeft - speed) + "px";break;case 38:demo.style.top = (demo.offsetTop - speed) + "px";break;case 39:demo.style.left = (demo.offsetLeft + speed) + "px";break;case 40:demo.style.top = (demo.offsetTop + speed) + "px";break;}},30);};

四、效果展示

五、总结

以上就是今天要讲的内容，此次主要介绍了如何利用键盘事件和定时器来完成键盘控制div的移动和加速，简单易操作。

js实现键盘控制div移动（可加速）_☆往事随風☆的博客相关推荐

js实现点击按钮切换图片功能_☆*往事随風*☆的博客
文章目录前言一.DOM是什么? 二.对象的HTML DOM 树三.图片切换练习 1.要求 2.实现思路 3.示例代码 1.html示例代码如下: 2.css示例代码如下: 2.js示例代码如下: ...
js实现点击按钮图片自动切换_☆往事随風☆的博客
文章目录前言一.基本思路二.代码分析 1.创建数组保存图片的存储路径 2.获取按钮对象 3.调用定时器 4.关闭定时器三.整体代码四.效果展示前言利用js实现一个图片自动切换的功能. 一 ...
BootStrap使用方法为BootStrap3添加jquery.min.js文件（简单易懂）_☆往事随風☆的博客
为BootStrap3添加jquery.min.js文件一.前言二.BootStrap简介三.BootStrap3的使用方法 (1)先去官网找到BootStrap3这个版本的文档. (2)配置B ...
基于C语言的彩票开奖小程序（附源码）_☆*往事随風*☆的博客
简易彩票开奖系统一.基本要求: 要能够实现随机产生六位处于1-33之间的彩票号码,并且可以与用户输入的号码进行校对,最终判断用户的号码可以获得多少奖金. 二.基本原理: 利用随机数函数和数组来分别产 ...
基于51单片机实现秒表_☆往事随風☆的博客
基于51单片机实现秒表前言一.实现功能二.关键程序 (1)key函数 (2)display函数 (3)中断函数三.完整程序四.仿真五.效果展示六.项目地址前言基于51单片机实现一个共 ...
基于C语言的学生信息管理系统_(更新版)_（附源码和安装包）_课程设计_☆*往事随風*☆的博客
学生信息管理系统一.需求基于C语言编写一个学生信息管理系统来实现对学生成绩的管理(数学.C语言.英语),系统要能够实现基本的增.删.改.查等功能,在此基础上还可以自由发挥,要求使用到数组.文件.排 ...
c语言键盘移动解决停顿问题,原生js实现键盘控制div移动且解决停顿问题
首先说明下为什么会停顿? 效果 :用键盘控制一个div移动当按下一个方向键不放,div会先停顿一下,然后才开始持续移动. 原因:系统要区分用户是否连续输入,第一个到第二个之间有一个停顿时间注:了解 ...
用 JS 点击左右按钮使图片切换 - 最精简版-ljx2380000-ChinaUnix博客
用 JS 点击左右按钮使图片切换 - 最精简版-ljx2380000-ChinaUnix博客代码部分: 点击(此处)折叠或打开 <!DOCTYPE html PUBLIC "-// ...
怎么禁止/开启Ubuntu自动更新升级_豆豆技术派的博客-CSDN博客_ubuntu 自动更新
怎么禁止/开启Ubuntu自动更新升级_豆豆技术派的博客-CSDN博客_ubuntu 自动更新

js实现键盘控制div移动（可加速）_☆往事随風☆的博客

文章目录

前言

一、基本思路

二、代码分析

1.首先为div开启绝对定位

2.为document绑定键盘按下和抬起事件

3.获取对应键盘的Unicode编码

4.设置变量保存速度和键盘Unicode编码

5.通过定时器设置移动速度和方向

三、整体代码

四、效果展示

五、总结

js实现键盘控制div移动（可加速）_☆往事随風☆的博客相关推荐

最新文章

热门文章