php 键盘事件,JS--键盘事件

实例

html>

Document

*{margin:0px;padding:0px;}

#box{width:100px;height:100px;position:absolute;/*background:pink;*/}

#parent{width:400px;height:400px;border:1px solid red;background-image:url(./bg.jpg);}

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

//上键 38

//下键 40

//左键 37

//右键 39

document.onkeydown = function(e){

var e  = e || event;

//alert(e.keyCode);

switch(e.keyCode){

case 37:

if((parseInt(box.style.left)-10)>0){

//alert('按了左键')

box.style.left = parseInt(box.style.left)-10+'px';

}else{

box.style.left = '0px';

}

break;

case 38:

if((parseInt(box.style.top)-10)>0){

//alert('按了上键')

box.style.top = parseInt(box.style.top)-10+"px";

}else{

box.style.top="0px";

}

break;

case 39:

//alert('按了右键')

if(parseInt(box.style.left)

box.style.left = parseInt(box.style.left) + 10 + 'px';

}else{

box.style.left= 300+'px';

}

break;

case 40:

//alert('按了下键')

if(parseInt(box.style.top) 

box.style.top = parseInt(box.style.top) + 10 +'px';

}else{

box.style.top='300px';

}

break;

}

}

运行实例 »

点击 "运行实例" 按钮查看在线实例