<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
#div1{
100px;
height: 100px;
background: orange;
position: relative;
}
</style>
</head>
<body>
<div id="div1">推推推</div>
</body>
</html>
<script src="utils.js"></script>
<script>
/*var n =12;
switch (n){
case 1:
console.log(1);
break;
case 2:
console.log(2);
break;
default:
console.log(3);
};*/
var oDiv = document.getElementById('div1');
document.onkeydown = function (e) {
e = e || window.event;
console.log(e.keyCode);// 记录的是键盘对应的键值码
var l = oDiv.style;
// var l2 = oDiv.style.left;
switch (e.keyCode){
case 37:
l.left = utils.css(oDiv,'left') - 10 + 'px';
break;
case 38:
l.top = utils.css(oDiv,'top') - 10 + 'px';
break;
case 39:
l.left = utils.css(oDiv,'left') + 10 + 'px';
break;
case 40:
l.top = utils.css(oDiv,'top') + 10 + 'px';
break;
}
}
</script>