键盘事件跟随键盘

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>#div1 {
width: 100px;
height: 100px;
background: red;position: absolute;
}</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
<script>
const div1 = document.getElementById("div1")

onkeydown = function (event) {
// console.log(event.keyCode)
if (event.keyCode===37){
console.log('左',div1.offsetLeft)
div1.style.left=div1.offsetLeft-10+'px'
return
}
if (event.keyCode===38){
console.log('上')
div1.style.top=div1.offsetTop-10+'px'
return
}
if (event.keyCode===39){ div1.style.left=div1.offsetLeft+10+'px'
console.log('右')
return
}
if (event.keyCode===40){
console.log('下')
}

}


</script>
posted @ 2023-06-30 10:42  崔鑫焱  阅读(18)  评论(0)    收藏  举报