案例:

使用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> ​
效果如下: 

技术
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:[email protected]
QQ群:766591547
关注微信