首页 > 其他分享> > js基础-键盘事件

js基础-键盘事件

2021-12-04 23:32:07 作者：互联网

键盘事件

一.

1.keydown：在键盘上按下某个键时触发。如果按住某个键，会不断触发该事件

2.keypress：按下某个键盘键并释放时触发。如果按住某个键，会不断触发该事件。

3.keyup：释放某个键盘键时触发。该事件仅在松开键盘时触发一次，不是一个持续的响应状态。

二.

简单示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box {
            width: 400px;
            height: 600px;
            border: 1px solid;
            margin: 50px auto 0;
            position: relative
        }

        #tank {
            width: 50px;
            height: 50px;
            position: absolute;
            left: 175px;
            bottom: 0;
            background: darkgreen
        }
    </style>
</head>
<body>
<div id="box">
    <div id="tank"></div>
</div>
</body>
</html>
<script>
    var box = document.getElementById('box')
    var tank= document.getElementById('tank')
    document.onkeydown=function (event) {
        if(event.keyCode == 37){
           /* if(tank.offsetLeft <= 0){
                tank.style.left = '0'
            }else{
                tank.style.left = tank.offsetLeft - 3 + 'px'
            }*/
        //    三目运算符
            tank.style.left=tank.offsetLeft>0?tank.offsetLeft -3 + 'px':0
        }
        if(event.keyCode == 39){
           /* if(tank.offsetLeft >= box.offsetWidth-tank.offsetWidth){
                tank.style.left = box.offsetWidth-tank.offsetWidth + 'px'
            }else{
                tank.style.left = tank.offsetLeft + 3 + 'px'
            }*/
            tank.style.left=tank.offsetLeft>0?tank.offsetLeft+3+'px':0
        }
    }

    onkeydown,onkeyup,onkeypress
    //回车键的键值是13
</script>

标签：box,触发,tank,px,js,键盘,offsetLeft,事件
来源： https://www.cnblogs.com/tanghuijun/p/15643786.html