html 上下左右键,纯js操作div 上下左右移动

HTML <meta> 标签

请使用↑↓↔或者wasd操作

function myParseInt(s) {

var ret = parseInt(s);

return (isNaN(ret) ? 0 : ret);

}

document.οnkeydοwn=function(e){

var bodyWidth = document.documentElement.clientWidth;

var bodyHeight = document.documentElement.clientHeight;

e=window.event||e;

var el = document.getElementById("element");

switch(e.keyCode){

case 37: //左键

if(myParseInt(el.style.left)>0){

el.style.left =(myParseInt(el.style.left) - 100) + "px";

}

break;

case 38: //向上键

if(myParseInt(el.style.top)>0){

el.style.top =(myParseInt(el.style.top) - 100) + "px";

}

break;

case 39: //右键

if(myParseInt(el.style.left)<= bodyWidth){

el.style.left =(myParseInt(el.style.left) + 100) + "px";

}

break;

case 40: //向下键

if(myParseInt(el.style.top)<= bodyHeight){

el.style.top =(myParseInt(el.style.top) + 100) + "px";

}

break;

case 65: //左键

if(myParseInt(el.style.left)>0){

el.style.left =(myParseInt(el.style.left) - 100) + "px";

}

break;

case 87: //向上键

if(myParseInt(el.style.top)>0){

el.style.top =(myParseInt(el.style.top) - 100) + "px";

}

break;

case 68: //右键

if(myParseInt(el.style.left)<= bodyWidth){

el.style.left =(myParseInt(el.style.left) + 100) + "px";

}

break;

case 83: //向下键

if(myParseInt(el.style.top)<= bodyHeight){

el.style.top =(myParseInt(el.style.top) + 100) + "px";

}

break;

default:

break;

}

}