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

---

前言

利用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的移动和加速，简单易操作。