event事件---键盘事件

最新推荐文章于 2022-10-27 17:19:03 发布

童童童ing

最新推荐文章于 2022-10-27 17:19:03 发布

阅读量349

点赞数

文章标签： javascript 前端 css3 开发语言 html5

本文链接：https://blog.csdn.net/weixin_64804275/article/details/124910289

版权

键盘事件

事件类型
键码

事件类型

keydown当用户按下键盘上的任意键时触发，按住不动将重复触发
keyup 当用户释放键盘上的键时触发
keypress当用户按下键盘上的字符键时触发，按住不动将重复触发

键码

event.keyCode-----键码
event.charCode-----ASCII编码形式展示，需通过String.fromCharCode()方法转换（IE9以下不支持）

结合此案例了解这些事件


<!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;
            position: absolute;
            left: 200px;
            top: 200px;
        }
    </style>
</head>
<body>
    <div id="ok"></div>
</body>
<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>
</html>

注意

    // 不合适，运动不自然
    // window.οnkeydοwn=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';
    // }

因为if…else if…,当不满足if条件时，才会去执行else if,如果if满足，就不会执行else If
多个if…语句时，会同时执行判断，互不影响

童童童ing

关注

0
点赞
踩
0

收藏

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

键盘事件事件类型键码事件类型keydown当用户按下键盘上的任意键时触发，按住不动将重复触发keyup 当用户释放键盘上的键时触发keypress当用户按下键盘上的字符键时触发，按住不动将重复触发键码event.keyCode-----键码event.charCode-----ASCII编码形式展示，需通过String.fromCharCode()方法转换（IE9以下不支持）结合此案例了解这些事件<!DOCTYPE html><html lang="en"&g
复制链接

扫一扫