JavaScript:onkeydown-键盘上的键被按下时触发事件

爱吃汉堡的代码人

已于 2022-10-16 16:17:16 修改

阅读量1.6k

点赞数

文章标签： javascript html 前端

于 2022-10-16 16:09:37 首次发布

本文链接：https://blog.csdn.net/weixin_67224308/article/details/127275791

版权

案例：

使用div布局以及键盘点击事件的一个实例运用，实现一个点击键盘上下左右键使div布局移动

示例:

第一步：

写两个HTML-div布局，并定义id

<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </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>
   </body>
</html>

第二步：

写div布局的css样式

<style type="text/css">
			body{
				margin: 0;
				padding: 0;
			}
			#content{
				width: 700px;
				height: 700px;
				background-color: #000000;
				margin: auto;
				position: relative;
			}
		</style>

第三步：

写键盘点击事件 onkeydown:按键被按下后触发一个函数，用键码对应的键位写出代码

//按键被按下后触发一个函数

document.onkeydown = function(){

//弹出显示键盘有键被按下

alert("键盘上有键被按下");

}

使用if...else结构

<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;
				//向右移动
				if (event.keyCode == 39) {
					if(parseInt(move_div.style.left)>=(parseInt(x)-100)){
						alert("已经到最右边了");
				} else{
					move_div.style.left = (parseInt(move_div.style.left)+5)+"px";
				}
			}else if (event.keyCode == 40) {//向下移动
					if(parseInt(move_div.style.top)>=(parseInt(y)-100)){
						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>

整体代码如下：


<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;
				//向右移动
				if (event.keyCode == 39) {
					if(parseInt(move_div.style.left)>=(parseInt(x)-100)){
						alert("已经到最右边了");
				} else{
					move_div.style.left = (parseInt(move_div.style.left)+5)+"px";
				}
			}else if (event.keyCode == 40) {//向下移动
					if(parseInt(move_div.style.top)>=(parseInt(y)-100)){
						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>

效果如下:

爱吃汉堡的代码人

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript:onkeydown-键盘上的键被按下时触发事件

写键盘点击事件onkeydown，用键码对应的键位写出代码。写两个HTML-div布局，并定义id。使用if...else结构。写div布局的css样式。
复制链接

扫一扫