事件（键盘事件）

最新推荐文章于 2023-06-05 13:11:26 发布

章鱼Cc_yoo

最新推荐文章于 2023-06-05 13:11:26 发布

阅读量160

点赞数

文章标签： wpf p2p 网络协议

本文链接：https://blog.csdn.net/cc200171/article/details/124877806

版权

键盘事件

1. keydown当用户按下键盘上的任意键时触发，按下不动将重复触发

2. keyup 当用户释放键盘上的键时触发

e.keyCode 键码值判断按键的标准

案例：键盘控制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>键盘控制div移动</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #ok{
            width: 100px;
            height: 100px;
            background-color: pink;
            background-image: url(../img/1.jpg);
            background-size: cover;
            background-position: center center;
            position: absolute;
            left: 200px;
            top: 200px;
        }
    </style>
</head>
<body>
    <div id="ok"></div>
</body>

1.不合适：div运动不自然案例

<script>
    var dOK = document.getElementById('ok');

     window.onkeydown = function(e) {
         var l = dOK.offsetLeft;
         var t = dOK.offsetTop;
         if (e.keyCode === 37) {
             l -=5;
         } else if (e.keyCode === 38) {
             t -=5;
         } else if (e.keyCode === 39) {
             l += 5;
         } else if (e.keyCode === 40) {
             t +=5; 
         }
         dOK.style.left = l + 'px';
         dOK.style.top = t + 'px';
     }
 </script>

2. 合适：计时器 + 状态

<script>

    var dOK = document.getElementById('ok');

    状态
    var isLeft = false;
    var isTop = false;
    var isRight = false;
    var isBottom = false;

    计时器
    var timer = null;

    键盘事件：只修改状态
    window.onkeydown = function(e) {
        if ( e.keyCode === 37) {
            isLeft = true;
        } else if ( e.keyCode === 38) {
            isTop = true;
        } else if ( e.keyCode === 39) {
            isRight = true;
        } else if ( e.keyCode === 40) {
            isBottom = true;
        }
    }
    window.onkeyup = function(e) {
        if ( e.keyCode === 37) {
            isLeft = false;
        } else if ( e.keyCode === 38) {
            isTop = false;
        } else if ( e.keyCode === 39) {
            isRight = false;
        } else if ( e.keyCode === 40) {
            isBottom = false;
        }
    }

    通过计时器实现移动
    timer = setInterval(function() {
        var l = dOK.offsetLeft;
        var t = dOK.offsetTop;
        if (isLeft) { l -= 5; }
        if (isTop) { t -= 5; }
        if (isRight) { l +=5; }
        if (isBottom) { t +=5; }
        dOK.style.left = l + 'px';
        dOK.style.top = t + 'px';
    }, 30)
    
</script>

章鱼Cc_yoo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件（键盘事件）

键盘事件1. keydown当用户按下键盘上的任意键时触发，按下不动将重复触发2. keyup 当用户释放键盘上的键时触发e.keyCode 键码值判断按键的标准案例：键盘控制div移动<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=...
复制链接

扫一扫