JS键盘事件

最新推荐文章于 2024-09-25 18:15:20 发布

mmm_morning

最新推荐文章于 2024-09-25 18:15:20 发布

阅读量80

点赞数

文章标签： javascript html5 html

本文链接：https://blog.csdn.net/mmm_morning/article/details/120862162

版权

<!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>键盘事件</title>
</head>
<style>
    #box1{
        width: 100px;
        height: 100px;
        background-color: indianred;
        position: absolute;
    }
</style>
<body>
    <div id="box1">

    </div>
</body>
<script>
    window.onload=function(){
        /*
        键盘事件：一般绑定给一些可以获取到焦点的对象或者document
            -onkeydown:按键被按下，若一直按着不松手，则一直触发该事件
            -onkeyup:按键被松开。
            -keycode：通过keycode可以获取按键编码，得知按下的按键是谁
                此外，还有altkey，ctrlkey，shiftkey用于判断alt，ctrl，shift是否被按下（ture 0r false）
        */
    //    本次练习，实现div按照不同的方向键进行移动
       var box=document.getElementById("box1");
    //    定义移动速度
       var speed=10;
       
       document.onkeydown=function(event){
       event=event||window.event;
       //加速效果
       if(event.ctrlKey){
           speed=300;
       }else{
           speed=10;
       };
       switch(event.keyCode){
            case 37:
                box.style.left=box.offsetLeft-speed+"px"; 
                break; 
            case 38:
                box.style.top=box.offsetTop-speed+"px";
                break;
            case 39:
                box.style.left=box.offsetLeft+speed+"px";
                break;
            case 40:
                box.style.top=box.offsetTop+speed+"px";
                break;
        } 
    
       } 
        


    }
</script>
</html>