效果:
css部分:
.recangle{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: red;
position: absolute;
}
HTML部分:
<div class="recangle"></div>
JS部分:
var goal=document.getElementsByClassName('recangle')[0];
var left=goal.offsetLeft;
var a=goal.offsetTop;//没有采用top,因为top是保留字,不起作用
document.onkeydown=function(ev){
var e=window.event||ev;
switch(e.keyCode){
case 37://捕捉左移的按键
left-=10;
goal.style.left=left+'px';
break;
case 38://捕捉向下的按键
a-=10;//没有采用top,因为top是保留字,不起作用
goal.style.top=a+'px';
break;
case 39://捕捉右移的按键
left+=10;
goal.style.left=left+'px';
break;
case 40: //捕捉向上的按键
a+=10;
goal.style.top=a+'px';
break;
}
}
}