首页 > 其他分享> 文章详细

js基础-键盘事件

2021-12-04 23:32:07 阅读：162 来源： 互联网

标签：box 触发 tank px js 键盘 offsetLeft 事件

键盘事件

一.

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

js基础-键盘事件

键盘事件