js总结9（完）-优快云博客

本文链接：https://blog.youkuaiyun.com/Emperorn/article/details/127104654

该博客介绍了如何利用JavaScript的键盘事件onkeydown、onkeyup和onkeypress来控制网页中元素的移动。通过监听按键，根据左右上下箭头改变div的位置，实现了一个简单的交互效果。代码示例展示了如何响应键盘输入并更新元素坐标，同时设置了边界检测以防止元素移出可视区域。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

键盘事件

onkeydown：按下一个键

onkeyup：松开一个键

onkeypress：按下然后松开一个键

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				margin: 0;
				padding: 0;
			}
			#content{
				width: 700px;
				height: 700px;
				background-color: #000000;
				margin:auto;
				position: relative;
			}
		</style>

	</head>
	<body>
		<div id="content">
			<div id="move_div" style="background-color: green;width: 100px;
			height: 100px;position: absolute;top: 0;left: 0;"></div>
		</div>
		<script type="text/javascript">
//			onkeydown:键盘上的键被按下时触发的事件
			document.onkeydown=function(){
				var move_div=document.getElementById("move_div")
				//用于获取外层div的宽度和高度
				var x=getComputedStyle(document.getElementById('content')).width
				var y=getComputedStyle(document.getElementById('content')).height
//				alert(x)
				if(event.keyCode==39){
					if(parseInt(move_div.style.left)+100>=parseInt(x)){
						alert("已经到最右边了")	
					}else{
						move_div.style.left=(parseInt(move_div.style.left)+5)+"px"
					}
					
				}else if(event.keyCode==40){
					if(parseInt(move_div.style.top)+100>=parseInt(y)){
						alert("已经到达最底端了")
					}else{
						move_div.style.top=(parseInt(move_div.style.top)+5)+"px"
					}
					
				}else if(event.keyCode==37){
					if(parseInt(move_div.style.left)==0){
						alert("已经到最左边了")
					}else{
						move_div.style.left=(parseInt(move_div.style.left)-5)+"px"
					}
					
				}else if(event.keyCode==38){
					if((parseInt(move_div.style.top))==0){
						alert("已经到达最顶端了")
					}else{
						move_div.style.top=(parseInt(move_div.style.top)-5)+"px"
					}
				}			
			}

		</script>
	</body>
</html>

最后总结

谢谢大家的观看，虽然只是一些基础的知识。但是希望对大家有所帮助。