zoukankan      html  css  js  c++  java
  • 如何制作一个HTML页面的锁屏功能

    如果后台一些界面比较敏感,希望主动或者被动的在人员不想暴露信息的情况下加一把锁,就是说避免信息一直在页面上暴露,可以使用”阅后即焚“这种思路,这种思路比较简单,显示了就过几秒删除,js remove节点即可(如果有必要做成真正的只能读一次那后台数据也要删掉),还有一个办法是给页面锁屏。

    如何给某个页面加上一个锁屏功能呢,表现形式有这么几种

    1.长时间未操作页面自动跳到一个锁屏提示页面需要再次输入密码才能进入。实现方案可以是定时器监控到页面有没有被操作了,长时间未动,自己跳转一下。

    2.点击某个按钮(立即锁屏)这种主动触发,这个就比较简单了,a标签页面跳转即可。

    3.用户按下键盘进行触发锁屏,本文主要说这个。

    前面两种思路都很清晰很容易做到,第三种需要点键盘事件触发的概念,比如 Ctrl+l,查了一下,可以这样做,上代码

    <!DOCTYPE html>
    <html>
    <head>
        <title>Ctrl+l监控锁屏</title>
    </head>
    <body>
      <div id="message_div"></div>
      <script type="text/javascript" language=JavaScript>
        document.onkeydown=function(event){
          var e = event || window.event || arguments.callee.caller.arguments[0];
          if (e.keyCode == 76 && e.ctrlKey) {
            document.getElementById("message_div").innerHTML="你按下了ctrl+l,开发的时候可以跳到一个锁屏的页面";
            // window.location.href = '锁屏页面';
            return false;
          }
        };
      </script>
    </body>
    </html>

    你可以看到当按下 ctrl l,页面的文字出现了

    核心点就是这个onkeydown监控 以及各个键对应的code值,还有这种判断 ctrl 是否按下的判断条件。

    如果你想知道的更详细 可以打印 

    console.log(e);

    就能知道它应该怎么用了,例如我按下小写的l

    关于列表的对照 可以看这里

    8 BackSpace BackSpace
    9 Tab Tab
    12 Clear
    13 Enter
    16 Shift_L
    17 Control_L
    18 Alt_L
    19 Pause
    20 Caps_Lock
    27 Escape Escape
    32 space
    33 Prior
    34 Next
    35 End
    36 Home
    37 Left
    38 Up
    39 Right
    40 Down
    41 Select
    42 Print
    43 Execute
    45 Insert
    46 Delete
    47 Help
    48 0 equal braceright
    49 1 exclam onesuperior
    50 2 quotedbl twosuperior
    51 3 section threesuperior
    52 4 dollar
    53 5 percent
    54 6 ampersand
    55 7 slash braceleft
    56 8 parenleft bracketleft
    57 9 parenright bracketright
    65 a A
    66 b B
    67 c C
    68 d D
    69 e E
    70 f F
    71 g G
    72 h H
    73 i I
    74 j J
    75 k K
    76 l L
    77 m M mu
    78 n N
    79 o O
    80 p P
    81 q Q at
    82 r R
    83 s S
    84 t T
    85 u U
    86 v V
    87 w W
    88 x X
    89 y Y
    90 z Z
    112 F1
    113 F2
    114 F3
    115 F4
    116 F5
    117 F6
    118 F7
    119 F8
    120 F9
    121 F10
    122 F11
    123 F12
    124 F13
    125 F14
    126 F15
    127 F16
    128 F17
    129 F18
    130 F19
    131 F20
    132 F21
    133 F22
    134 F23
    135 F24
    136 Num_Lock
    137 Scroll_Lock
  • 相关阅读:
    Linux安装ntp同步时间
    Linux安装ntp同步时间
    Python的中文处理
    Python的中文处理
    Python的中文处理
    Sudo环境变量继承
    Sudo环境变量继承
    dataguard 日志传输服务
    Dataguard Content
    Oracle 10g DataGuard手记之基础配置
  • 原文地址:https://www.cnblogs.com/lizhaoyao/p/13084914.html
Copyright © 2011-2022 走看看