js弹出框代码(js实现自动锁屏功能)
类别:编程学习 浏览量:1414
时间:2022-01-25 00:05:13 js弹出框代码
js实现自动锁屏功能1.使用场景有这么一个需求,开发了一套系统,当用户离开桌面或者一段时间不操作的话,需要把该系统所有打开页面锁定起来,就跟桌面锁屏一样,只能输入密码验证成功后,或者重新登录,才可以继续操作页面,如果刷新页面,也要保持锁定。就像下图一样。当然用户也可以手动触发锁屏。目的是防止他人随意操作系统的重要内容。那么该如何去实现呢?
5s锁屏效果如下:
2.思路
- 首先需要一个变量isLock表示页面是否锁定。由于多个页面需要共享这个数据,且刷新后依然能够获取到,所以我使用了localStorage储存在本地。isLock为true的时候就展示锁屏样式。
- 设置一个定时器 setTimeout,比如代码中设置页面无操作n秒后锁屏,那么n秒后执行锁屏操作lockPro(),即var timer = setTimeout(lockPro, n)
- 需要监测window的mousemove事件,监测用户鼠标移动动作,判断屏幕有没有被锁定,如果已经锁定,则不做任何操作,如果屏幕还没有锁定,需要设置一个变量moveTime记录每次鼠标移动时的时间,并保存到localStorage中,并且清除定时器timer,重新计时。
- setInterval轮询监听isLock,每1s获取一次,以便及时拿到锁屏状态。
- 锁屏操作lockPro,判断当前时间与上次鼠标操作的时间即moveTime的差值,如果小于n秒,则认为不需要锁屏,如果大于等于n秒,则需要锁屏,并更新锁屏状态isLock
- 判断状态为锁定后,清除定时器timer,结束定时任务。
- 判断状态为未锁定后,重置定时器,即先清除timer,再设置一个timer
- 退出登录时,清除本地缓存isLock。
- 密码解锁时,清除本地缓存isLock,重新设置moveTime,重置定时器。
有点绕,需要好好捋一捋。
以下代码是不完全代码,html结构省略了,大家自由发挥。
// app.vue data () { return { timeOut: 5000, timer: null, isLock: 'false' } }, mounted () { this.timer = setTimeout(this.lockPro, this.timeOut) // 首次设置操作时间 localStorage.setItem('moveTime', Date.now()) // 首次判断状态 this.modalStatus() // 轮询监听状态 setInterval(this.modalStatus, 1000) // 监听鼠标事件 this.events() }, methods:{ events() { window.onmousemove = () => { // console.log('鼠标移动了') if (!this.isLock) { localStorage.setItem('moveTime', Date.now()) this.clearLocaPro('continue') } } }, modalStatus() { if (localStorage.getItem('isLock') === 'true') { // console.log('锁屏了') this.isLock = true this.clearLocaPro() } else { // console.log('当前没锁屏') this.isLock = false this.clearLocaPro('continue') } }, lockPro() { if (!this.timeOut) { localStorage.setItem('isLock', 'false') this.clearLocaPro('continue') return } if (Date.now() - localStorage.getItem('moveTime') < this.timeOut) { localStorage.setItem('isLock', 'false') this.clearLocaPro('continue') } else { localStorage.setItem('isLock', 'true') this.clearLocaPro() } }, clearLocaPro(status) { if(this.timer){ clearTimeout(this.timer) } if (status === 'continue') { this.timer = setTimeout(this.lockPro, this.timeOut) } }, // 手动锁定 handleLock(){ this.clearLocaPro() localStorage.setItem('isLock', 'true') }, // 密码解锁 unlock(){ localStorage.removeItem('isLock') localStorage.setItem('moveTime', Date.now()) this.clearLocaPro('continue') }, ... // 别忘了退出登录也要清除isLock }
到此这篇关于js实现自动锁屏功能的文章就介绍到这了,更多相关js 自动锁屏 内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- js setTimeout
- js函数声明和函数表达式的区别
- python pdf文件操作(Python常见读写文件操作实例总结文本、json、csv、pdf等)
- 在html中使用javascript实例代码(原生 JS+CSS+HTML 实现时序图的方法)
- angularjs使用指令(详解Angular路由动画及高阶动画函数)
- nodejs启动web服务器(使用NODE.JS创建一个WEBSERVER服务器的步骤)
- 纯css和js有什么区别(CSS语法与JSON、JS对象区别比较)
- dedecms中的有些功能如何修改(织梦DEDECMS中用JS方式调用评论总数的技巧)
- nodejs数据采集(nodejs获取表单数据的三种方法实例)
- js判断浏览器的版本
- 如何查找JS错误
- sqlserver如何生成xml文件(实现SQL Server 原生数据从XML生成JSON数据的实例代码)
- js定时器几分钟执行(利用JS定时器实现元素移动)
- mysql的json格式解析(mysql json格式数据查询操作)
- javaweb购物车案例(js实现模拟购物商城案例)
- jscanvas背景色(JavaScript canvas实现代码雨效果)
- 这部民警编演的红色话剧,讲述了一个不断追寻的故事(这部民警编演的红色话剧)
- 日本菜有什么好吃(日本菜有什么好吃的做法)
- 韩国泡菜做法(韩国泡菜的做法步骤)
- 泰国旅游攻略(泰国旅游攻略必去景点)
- 越难春卷(越难春卷皮怎么用)
- 休闲VS新古典 办公家居简约设计(办公家居简约设计)
热门推荐
- linuxmysql安装教程5.7.25学习(linux mysql5.5升级至mysql5.7的步骤与踩到的坑)
- python创建字典的代码(Python创建字典的八种方式)
- docker容器默认内存大小(Docker 修改docker存储位置 修改容器镜像大小限制操作)
- 云服务器ecs使用教程(在阿里云ECS服务器上搭建WordPress的全过程解析)
- php如何设置命名空间(PHP进阶学习之命名空间基本用法分析)
- python怎么自动生成报告(python根据文章标题内容自动生成摘要的实例)
- 如何在php内加密解密(PHP中散列密码的安全性分析)
- 微信小程序左右翻页效果(微信小程序实现九宫格效果)
- html样式中css怎么设置行高(CSS设置HTML元素的高度与宽度的各种情况总结)
- mysql的主从复制怎么做(MySQL主从复制原理以及需要注意的地方)