写一个小球用键盘上下左右键控制
首先在body里面创建一个
<div class="box"></div>
其次设置box的样式
.box{width:100px;height:100px;background: red;position: absolute;left:0;top:0;}
,最后获取节点
var obox = document.querySelector(".box")
document.onkeydown = function(eve){ //设置鼠标移动事件和键盘事件
var e = eve || window.event;
var code = e.keyCode || e.which;
switch(code){ //最后用switch判断
case 37:
// 设置left = 获取当前 - 10
obox.style.left = obox.offsetLeft-10 + "px";break; //左
case 38:
obox.style.top = obox.offsetTop-10 + "px";break; //上
case 39:
obox.style.left = obox.offsetLeft+10 + "px";break; //右
case 40:
obox.style.top = obox.offsetTop+10 + "px";break; //下
}
}
</script>