如何制作一个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 | |
| 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 |
如何制作一个HTML页面的锁屏功能的更多相关文章
- iOS开发——使用技术OC篇&简单九宫格锁屏功能的实现与封装
简单九宫格锁屏功能的实现与封装 首先来看看最后的实现界面. 在这开始看下面的内容之前希望你能先大概思考活着回顾一下如果 你会怎么做,只要知道大概的思路就可以. 由于iphone5指纹解锁的实现是的这个 ...
- CentOS系统里如何正确取消或者延长屏幕保护自动锁屏功能（图文详解）
不多说,直接上干货! 对于我这里想说的是,分别从CentOS6.X 和 CentOS7.X来谈及. 1. 问题:默认启动屏幕保护 问题描述: CentOS系统在用户闲置一段时间(默认为5分钟)后, ...
- 【Centos】Centos7.5取消自动锁屏功能
目录 00. 目录 01. 问题描述 02. 问题分析 03. 解决办法 04. 附录 00. 目录 @ 参考博客:[Centos]Centos7.5取消自动锁屏功能 01. 问题描述 Centos7 ...
- Android开发之实现锁屏功能
锁屏须要引入设备超级管理员.在文档Android开发文档的Administration中有具体的说明. Android设备管理系统功能和控制訪问. 主要有一下几个步骤: 1 创建广播接收者,实现De ...
- Android定时锁屏功能实现（AlarmManager定时部分）
菜鸟入坑记——第一篇 关键字:AlarmManager 一.AlarmManager简介: 参考网址:https://www.jianshu.com/p/8a2ce9d02640 参考网 ...
- uwp 的锁屏功能
[UWP开发]自定义锁屏&桌面壁纸 mtobeiyf关注 2015.11.01 00:16:55字数 394阅读 1,249 调用通用的API来设置桌面壁纸,可以实现很多有趣的功能.在Wind ...
- js防windos锁屏功能实现
<li class="layui-nav-item"> <a href="javascript:;" id="lock"& ...
- CentOS取消屏幕保护自动锁屏功能
CentOS系统在用户闲置一段时间(默认为5分钟)后,会启动屏幕保护程序(默认的屏保为黑屏),并要求重新输入密码才能回到原来的桌面. 设置屏幕保护:System -> Preferences - ...
- ajax请求锁屏功能
我们有时候在进行ajax请求的时候希望页面不允许点击,等请求结束之后才可以进行点击,那么可以写: $(".cloudos-container").ajaxStart($.block ...
- Android端恶意锁屏勒索应用分析
一.前言 5月12日,一场全球性互联网灾难悄然而至,一款名为WannaCRY的PC端恶意勒索软件利用NSA泄漏的危险漏洞“永恒之蓝”,给100多个国家和地区10万台电脑造成了巨大的损失.到2017年为 ...
随机推荐
- ArcGIS创建渔网工具的使用方法
本文介绍在ArcMap软件中,通过"Create Fishnet"工具创建渔网,从而获得指定大小的矢量格网数据的方法. 首先,我们在创建渔网前,需要指定渔网覆盖的范围.这里 ...
- Windows提权方式汇总
windows 提权 一.土豆(potato)家族提权 原理 土豆提权就是通过 windows 的 COM(Component Object Model,组件对象模型)类.向指定的服务器端口发送 NT ...
- docker高级篇：实战-自己开发的微服务怎么在docker上面运行？
通过前面的一系列学习,我们已经知道怎么制作dockerfile了.那么,本篇文章,咱们就把自己写的spring boot的demo项目,部署在docker上面. 案例目标: 我们自己开发的微服务怎么在 ...
- 以MySQL为例，来看看maven-shade-plugin如何解决多版本驱动共存的问题？
开心一刻 清明节那天,看到一小孩在路边烧纸时不时地偷偷往火堆里扔几张考试卷子边烧边念叨:爷爷呀,你岁数大了,在那边多做做题吧,对脑子好,要是有不懂的地方,就把我老师带走,让他教您! 前提说明 假设 M ...
- 淘宝订单信息获取接口,淘宝订单信息获取API
在日常电商软件开发的工作中,我们经常会遇到需要淘宝的订单信息的场景,比如:打单.发货,又比如做BI工具等.这就需要用到淘宝订单信息获取接口.只有获取到淘宝订单信息,才能进行下一步工作. 目前这个接口是 ...
- SpringMVC——SSM整合——项目异常处理
项目异常处理 项目异常分类 业务异常 不规范的用户行为产生的异常 规范的用户行为产生的异常 系统异常 项目运行过程中可预计且无法避免的异常 其他异常 编程人员未预期到的异常 项 ...
- Linux下挂载SD卡，以及容易犯的误区
1.插入SD卡 如果系统能够识别SD卡,则会打印一些信息: 2.查看系统给SD卡分配的设备名 命令如下: fdisk -l 说明:通常是根据SD卡的存储容量来确定的. 比如下面的信息: 3.挂载SD卡 ...
- 2024年常用的Python可视化框架及开源项目
以下是 2024 年一些较为流行的 Python 可视化框架及开源项目: Matplotlib 框架声明:是 Python 中最基础.最广泛使用的可视化库之一,用于创建各种静态.动态和交互式图表. 官 ...
- Kubernetes基础（基本概念、架构）（十）
一.介绍 Kubernetes(简称 K8S) 的出现是容器化技术发展的必然结果,容器化是应用程序级别的虚拟化,运行单个内核上有多个独立的用户空间实例,这些实例就是容器:容器提供了将应用程序的代码.运 ...
- Xcode 12 引用缺失包：libstdc++.tbd libstdc++.6.tbd libstdc++.6.0.9.tbd引发的一系列问题解析
升级到xcode12后会有libstdc++.tbd libstdc++.6.tbd libstdc++.6.0.9.tbd 等库缺失的情况,并引发一些列的 Undefined symbols for ...