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 tab栏案例(JavaScript实现Tab栏切换特效)
- js常见面试题
- js中数组的操作
- js怎么上传压缩图片(如何用JS有效的压缩图片)
- js特效星空(ThingJS粒子特效一键实现雨雪效果)
- vue.js入门教学第15讲(Vue.js 使用AntV X6的示例步骤)
- Extjs msgTarget 提示位置
- packagejson怎么使用(最全的package.json解析)
- JS中prototype
- html5长图拖动(html5 拖拽及用 js 实现拖拽功能的示例代码)
- MVC中JSON字符长度超出限制
- Extjs menu菜单的简单用法
- js return false的作用
- vue 富文本图片上传(vue.js云存储实现图片上传功能)
- js截取字符串
- laravel-admin代码执行流程(解决laravel-admin 自己新建页面里 js 需要刷新一次的问题)
- 来了 成都轨道交通5条线路刷新 进度条(成都轨道交通5条线路刷新)
- 一部手机两套系统 OPPO Find X3的正确打开方式你知道吗(一部手机两套系统)
- OPPO用户看过来 汇总几个春节实用技巧,轻松搞定多设备联动玩法(汇总几个春节实用技巧)
- 北京旅游攻略(北京旅游攻略5日游及其花费)
- 四川旅游攻略(四川旅游攻略自由行攻略)
- 上海迪士尼攻略(上海迪士尼攻略旅游)
热门推荐
- 阿里云服务器更改登录密码(阿里云服务器怎么修改登录密码?)
- laravel模型详解(laravel config文件配置全局变量的例子)
- python自动解密(python实现移位加密和解密)
- nodejs实现websocket服务端(Node.js+express+socket实现在线实时多人聊天室)
- phpredis消息队列(PHP+redis实现微博的推模型案例分析)
- iis上搭建php环境(vultr服务器windows server 2012 r2搭建IIS8+PHP+MYSQL+phpMyAdmin运行环境图文教程)
- python爬虫第一本书(我用Python抓取了7000 多本电子书案例详解)
- css弹出框特效(利用CSS实现酷炫的下拉框特效)
- 如何降低SQL语句复杂度
- react基础知识详解(如何深入理解React的ref 属性)