javaScript+css+html——键盘事件（通过键盘上下左右控制图形位置）

最新推荐文章于 2024-06-18 09:28:07 发布

十二Tel

最新推荐文章于 2024-06-18 09:28:07 发布

阅读量7.5k

点赞数 2

本文链接：https://blog.csdn.net/weixin_42426348/article/details/80683715

版权

该篇效果需要自己去试，测试的时候通过键盘上面的上下左右来控制图形的位置即可，可通过这个内容尝试做俄罗斯方块。

通过switch case语句控制所选方向。

效果图如下：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘事件（上、下、左、右）</title>
    <style type="text/css">
        #box1{
            width: 50px;
            height:50px;
            position: absolute;
            background: lightskyblue;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var box1 = document.getElementById("box1");
            document.onkeydown = function (event) {
                event = event || window.event;/*||为或语句，当IE不能识别event时候，就执行window.event 赋值*/
                console.log(event.keyCode);
                switch (event.keyCode){/*keyCode:字母和数字键的键码值*/
                    /*37、38、39、40分别对应左上右下*/
                    case 37:
                        box1.style.left = box1.offsetLeft - 10 + "px";/*图形左移*/
                        break;
                    case 38:
                        box1.style.top = box1.offsetTop - 10 + "px";/*图形上移*/
                        break;
                    case 39:
                        // alert("你点击了右键");
                        // alert(box1.offsetLeft + 10 + "px");
                        box1.style.left = box1.offsetLeft + 10 + "px";/*图形右移*/
                        break;
                    case 40:
                        box1.style.top = box1.offsetTop + 10 + "px";/*图形下移*/
                        break;
                }
            }
        }
    </script>
</head>
<body>
    <div id="box1"></div>
</body>
</html>

十二Tel

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
javaScript+css+html——键盘事件（通过键盘上下左右控制图形位置）

该篇效果需要自己去试，测试的时候通过键盘上面的上下左右来控制图形的位置即可，可通过这个内容尝试做俄罗斯方块。通过switch case语句控制所选方向。效果图如下：代码如下：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;键
复制链接

扫一扫