- 站点信息
- 问题反馈
- 邮箱：[email protected]
- 吐槽一下
关注微信
©2020-2025 ioDraw All rights reserved,
Privacy Policy
案例：
使用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>
效果如下: