外部js控制HTML中div移动效果,JavaScript利用键盘码控制div移动

前言

在生活中肯定有玩过贪吃蛇的游戏，那么要怎么样用键盘码来实现div的移动呢？下面就分享一个Demo。

利用键盘码来控制div移动源码

#box {

height: 100px;

width: 100px;

background-color: red;

position: absolute;

}

var oBox = document.getElementById("box")

var x = 0

var y = 0

document.onkeyup = function(ev) {

var ev = ev || event

// 指定方向键 ，w(上-->87),a(左-->83),s(下-->65),d(右-->67)

// 通过keyCode来识别当前按的是哪个键

// x += 10

// oBox.style.left = x +"px"

// 根据键盘码来确定往哪个方向移动

switch(ev.keyCode) {

case 87:

// 往上移动

y -= 20

break

case 83:

// 往下移动

y += 20

break

case 65:

//

x -= 20

break

case 68:

x += 20

break

default:

break

}

oBox.style.left = x + "px"

oBox.style.top = y + "px"

}

上面就是Demo的所有源码，我们可以通过键盘码来控制div来移动，里面具体的参数可以自己修改。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。