html键盘控制一串元素移动,【案例】使用上下左右键控制元素的移动

使用键盘上下左右键控制小球移动

*{

margin:0;

padding:0;

}

#ball{

width: 200px;

height: 200px;

background: pink;

border-radius: 50%;

position: absolute;

}

//获取元素

var ball = document.getElementById('ball');

//定义小球每次移动的步径

var step = 1;

//定义小球水平、垂直方向移动定时器标志

var runX,runY;

//为使小球运行更流畅，加入水平移动定时器

function moveX(step){

console.log(runX);

if(runX){

return;

}

runX = setInterval(function(){

var newLeft = ball.offsetLeft + step;

var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;

if(newLeft <= 0){

newLeft = 0;

}

if(newLeft >= clientWidth - ball.offsetWidth){

newLeft &#