使用javascript组合键盘按键触发显示隐藏的参数设置页面

最新推荐文章于 2023-12-20 16:54:00 发布

原创最新推荐文章于 2023-12-20 16:54:00 发布 · 315 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #keycode #键盘按键 #e.keycode #触发

javascript 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一种在网页中使用特定键盘组合键触发显示隐藏参数设置页面的方法。通过监听键盘事件并匹配预设的键值序列，实现了一个简易的彩蛋功能。此功能可用于快速访问设置页面。

我的需求：在Login.html登录页面或Index.html主页面，通过键盘的组合按键（例如，上上下下左左右右ABAB），触发一个操作，显示一个隐藏的参数设置页面

在线获取键盘按键值：https://www.bejson.com/othertools/keycodes/

我的代码：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1,user-scalable=no" />
    <title>主界面</title>
    <script src="layer/layer.js"></script>
    <script type="text/javascript">

        $(function () {
            var i = 0;
            $(window).off("keydown.t").on("keydown.t", function (e) {
                var k = e.keyCode;
                if (k == 72) {
                    i = 1;
                }
                else if (i == 1 && k == 89) {
                    i = 2;
                }
                else if (i == 2 && k == 38) {
                    i = 3;
                }
                else if (i == 3 && k == 38) {
                    i = 4;
                }
                else if (i == 4 && k == 40) {
                    i = 5;
                }
                else if (i == 5 && k == 40) {
                    i = 6;
                }
                else if (i == 6 && k == 37) {
                    i = 7;
                }
                else if (i == 7 && k == 37) {
                    i = 8;
                }
                else if (i == 8 && k == 39) {
                    i = 9;
                }
                else if (i == 9 && k == 39) {
                    i = 10;
                }
                else if (i == 10 && k == 65) {
                    i = 11;
                }
                else if (i == 11 && k == 66) {
                    i = 12;
                }
                else if (i == 12 && k == 65) {
                    i = 13;
                }
                else if (i == 13 && k == 66) {
                    layer.open({
                        type: 2,
                        title: "配置文件参数设置",
                        shade: 0.4,
                        area: ['90%', '80%'],
                        content: "Setting.aspx"
                    });
                } else {
                    i = 0;
                }
            });
        });
</script>