js基础-键盘事件

2021/12/4 23:48:14

编程Tag： js 事件键盘触发 px offsetleft box TANK

本文主要是介绍js基础-键盘事件，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

键盘事件

一.

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>

这篇关于js基础-键盘事件的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

js基础-键盘事件

键盘事件

相关编程文章