JS-键盘移动事件

最新推荐文章于 2022-06-20 15:00:01 发布

weixin_30908103

最新推荐文章于 2022-06-20 15:00:01 发布

阅读量79

点赞数

原文链接：http://www.cnblogs.com/yuxiang-qiwa/p/8195715.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘移动div</title>
    <style>
        *{margin:0px;padding:0px;}
        #dvs{
            width:100px;
            height:100px;
            background:orange;
            position:absolute;
        }


    </style>
</head>
<body>
    <div id='dvs'></div>
    
    <script>
    var dvs = document.getElementById('dvs');

    window.onkeydown = function(e)
    {
        console.log(e);
        var code = e.keyCode;

        // console.log(code);
        switch(code){
            case 87:
                var t = dvs.offsetTop;
                var nt = t - 5;
                dvs.style.top = nt+'px';
            break;

            case 83:
                var t = dvs.offsetTop;
                var nt = t + 5;
                dvs.style.top = nt+'px';
            break;

            case 65:
                var l = dvs.offsetLeft;
                var nl = l - 5;
                dvs.style.left = nl+'px';
            break;

            case 68:
                var l = dvs.offsetLeft;
                var nl = l + 5;
                dvs.style.left = nl+'px';
            break;
        }

    }



    </script>
</body>
</html>