键盘控制DIV移动

最新推荐文章于 2022-10-27 13:49:00 发布

是欢欢啊

最新推荐文章于 2022-10-27 13:49:00 发布

阅读量55

点赞数

分类专栏： JS demo

本文链接：https://blog.csdn.net/bznhlhh/article/details/118487285

版权

JS demo 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>键盘控制DIV移动</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
    <div style="position: absolute;background-color:pink;width: 60px;height: 60px;"></div>
</body>
<script>
    
    var odiv=document.querySelector("div");
    document.onkeydown=function(e){
    var e = e || event; 
    var x = odiv.offsetLeft;  //获取div的坐标值
    var y = odiv.offsetTop;
    var height = document.body.clientHeight;
    console.log(height);
   
    var code = e.keyCode;  //获取键盘码
    switch (code) {   //当按下方向键，执行对应的功能
        case 38:
            odiv.style.left = x + "px";
            odiv.style.top = y<=0? y : y - 10 + "px";
            break;
        case 40:
            odiv.style.left = x + "px";  
            odiv.style.top = y>=height? y : y + 10 + "px";
            break;
        case 37:
            odiv.style.left = x<=0? x : x - 10 + "px";
            odiv.style.top = y + "px";
            break;
        case 39:
            odiv.style.left = x>=width? x : x + 10 + "px";
            odiv.style.top = y + "px";
            break;
    }
}


</script>
</html>

是欢欢啊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
键盘控制DIV移动

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>键盘.
复制链接

扫一扫

专栏目录