js实现自动锁屏功能


Posted in Javascript onJune 02, 2021

1.使用场景

有这么一个需求,开发了一套系统,当用户离开桌面或者一段时间不操作的话,需要把该系统所有打开页面锁定起来,就跟桌面锁屏一样,只能输入密码验证成功后,或者重新登录,才可以继续操作页面,如果刷新页面,也要保持锁定。就像下图一样。当然用户也可以手动触发锁屏。目的是防止他人随意操作系统的重要内容。那么该如何去实现呢?

5s锁屏效果如下:

js实现自动锁屏功能

2.思路

  1. 首先需要一个变量isLock表示页面是否锁定。由于多个页面需要共享这个数据,且刷新后依然能够获取到,所以我使用了localStorage储存在本地。isLock为true的时候就展示锁屏样式。
  2. 设置一个定时器 setTimeout,比如代码中设置页面无操作n秒后锁屏,那么n秒后执行锁屏操作lockPro(),即var timer = setTimeout(lockPro, n)
  3. 需要监测window的mousemove事件,监测用户鼠标移动动作,判断屏幕有没有被锁定,如果已经锁定,则不做任何操作,如果屏幕还没有锁定,需要设置一个变量moveTime记录每次鼠标移动时的时间,并保存到localStorage中,并且清除定时器timer,重新计时。
  4. setInterval轮询监听isLock,每1s获取一次,以便及时拿到锁屏状态。
  5. 锁屏操作lockPro,判断当前时间与上次鼠标操作的时间即moveTime的差值,如果小于n秒,则认为不需要锁屏,如果大于等于n秒,则需要锁屏,并更新锁屏状态isLock
  6. 判断状态为锁定后,清除定时器timer,结束定时任务。
  7. 判断状态为未锁定后,重置定时器,即先清除timer,再设置一个timer
  8. 退出登录时,清除本地缓存isLock。
  9. 密码解锁时,清除本地缓存isLock,重新设置moveTime,重置定时器。

有点绕,需要好好捋一捋。

3.代码实现

以下代码是不完全代码,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 自动锁屏 内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript编程起步(第一课)
Jan 10 Javascript
Web 前端设计模式--Dom重构 提高显示性能
Oct 22 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
Jan 17 Javascript
jquery $.fn $.fx是什么意思有什么用
Nov 04 Javascript
JS阻止用户多次提交示例代码
Mar 26 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
Dec 29 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
Aug 22 Javascript
jQuery简单实现提交数据出现loading进度条的方法
Mar 29 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
Oct 31 Javascript
微信小程序 数据遍历的实现
Apr 05 Javascript
JavaScript中使用Async实现异步控制
Aug 15 Javascript
微信小程序 textarea 层级过高问题简单解决方案
Oct 14 Javascript
如何将JavaScript将数组转为树形结构
Jun 02 #Javascript
关于antd tree 和父子组件之间的传值问题(react 总结)
使用react+redux实现计数器功能及遇到问题
微信小程序基础教程之echart的使用
vue实现水波涟漪效果的点击反馈指令
vue 实现上传组件
May 31 #Vue.js
vue基于Teleport实现Modal组件
You might like
比较好用的PHP防注入漏洞过滤函数代码
2012/04/11 PHP
php简单防盗链实现方法
2015/07/29 PHP
基于PHP微信红包的算法探讨
2016/07/21 PHP
php中替换字符串函数strtr()和str_repalce()的用法与区别
2016/11/25 PHP
Laravel 自定命令以及生成文件的例子
2019/10/23 PHP
火狐浏览器(firefox)下获得Event对象以及keyCode
2008/11/13 Javascript
Chrome中JSON.parse的特殊实现
2011/01/12 Javascript
js与css实现弹出层覆盖整个页面的方法
2014/12/13 Javascript
javascript arguments使用示例
2014/12/16 Javascript
JQuery CheckBox(复选框)操作方法汇总
2015/04/15 Javascript
原生JS和JQuery动态添加、删除表格行的方法
2015/05/28 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
2016/01/26 Javascript
@ResponseBody 和 @RequestBody 注解的区别
2017/03/08 Javascript
JavaScript之排序函数_动力节点Java学院整理
2017/06/30 Javascript
javaScript中的空值和假值
2017/12/18 Javascript
在 Vue.js中优雅地使用全局事件的方法
2019/02/01 Javascript
[03:38]2014DOTA2西雅图国际邀请赛 VG战队巡礼
2014/07/07 DOTA
Python实现图像几何变换
2015/07/06 Python
Python max内置函数详细介绍
2016/11/17 Python
python3个性签名设计实现代码
2018/06/19 Python
解决Pycharm出现的部分快捷键无效问题
2018/10/22 Python
浅谈python3发送post请求参数为空的情况
2018/12/28 Python
python实现静态web服务器
2019/09/03 Python
Python使用贪婪算法解决问题
2019/10/22 Python
Python命令行click参数用法解析
2019/12/19 Python
python中count函数简单的实例讲解
2020/02/06 Python
python操作docx写入内容,并控制文本的字体颜色
2020/02/13 Python
浅谈JupyterNotebook导出pdf解决中文的问题
2020/04/22 Python
CSS3使用多列制作瀑布流
2016/05/10 HTML / CSS
美国护肤咨询及美容产品电商:Askderm
2017/02/24 全球购物
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
N:Philanthropy官网:美国洛杉矶基础款服装
2020/06/09 全球购物
计算机专业自荐信
2013/10/14 职场文书
养殖行业的创业计划书
2014/01/05 职场文书
教师业务培训方案
2014/05/01 职场文书
导师推荐信范文
2014/05/09 职场文书