<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘移动div</title>
<style>
*{margin:0px;padding:0px;}
#dvs{
100px;
height:100px;
background:orange;
position:absolute;
}
</style>
</head>
<body>
<div id='dvs'></div>
<script>
var dvs = document.getElementById('dvs');
window.onkeydown = function(e)
{
console.log(e);
var code = e.keyCode;
// console.log(code);
switch(code){
case 87:
var t = dvs.offsetTop;
var nt = t - 5;
dvs.style.top = nt+'px';
break;
case 83:
var t = dvs.offsetTop;
var nt = t + 5;
dvs.style.top = nt+'px';
break;
case 65:
var l = dvs.offsetLeft;
var nl = l - 5;
dvs.style.left = nl+'px';
break;
case 68:
var l = dvs.offsetLeft;
var nl = l + 5;
dvs.style.left = nl+'px';
break;
}
}
</script>
</body>
</html>