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 11 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
Dec 14 Javascript
JavaScript Function函数类型介绍
Apr 08 Javascript
解析JavaScript中的字符串类型与字符编码支持
Jun 24 Javascript
AngularJs Forms详解及简单示例
Sep 01 Javascript
Web前端框架Angular4.0.0 正式版发布
Mar 28 Javascript
node.js-v6新版安装具体步骤(分享)
Sep 06 Javascript
结合Vue控制字符和字节的显示个数的示例
May 17 Javascript
分享5个顶级的JavaScript Ajax组件库
Sep 16 Javascript
使用vue制作滑动标签
Sep 21 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
May 12 Javascript
JS实现炫酷雪花飘落效果
Aug 19 Javascript
如何将JavaScript将数组转为树形结构
Jun 02 #Javascript
关于antd tree 和父子组件之间的传值问题(react 总结)
使用react+redux实现计数器功能及遇到问题
微信小程序基础教程之echart的使用
vue实现水波涟漪效果的点击反馈指令
vue 实现上传组件
May 31 #Vue.js
vue基于Teleport实现Modal组件
You might like
windows下PHP APACHE MYSQ完整配置
2007/01/02 PHP
深入PHP5中的魔术方法详解
2013/06/17 PHP
PHP编程实现多维数组按照某个键值排序的方法小结【2种方法】
2017/04/27 PHP
实例讲解PHP中使用命名空间
2019/01/27 PHP
JS常用字符串处理方法应用总结
2014/05/22 Javascript
javascript中for/in循环及使用技巧
2015/09/01 Javascript
JS获取复选框的值,并传递到后台的实现方法
2016/05/30 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
2016/11/10 Javascript
jquery将标签元素的高设为屏幕的百分比
2017/04/19 jQuery
angular.js中解决跨域问题的三种方式
2017/07/12 Javascript
基于JS脚本语言的基础语法详解
2017/07/22 Javascript
微信小程序实现聊天对话(文本、图片)功能
2018/07/06 Javascript
详解vue-router数据加载与缓存使用总结
2018/10/29 Javascript
一个因@click.stop引发的bug的解决
2019/01/08 Javascript
JavaScript使用闭包模仿块级作用域操作示例
2019/01/21 Javascript
js实现简单进度条效果
2020/03/25 Javascript
Python的Flask开发框架简单上手笔记
2015/11/16 Python
Tensorflow 自带可视化Tensorboard使用方法(附项目代码)
2018/02/10 Python
python 剪切移动文件的实现代码
2018/08/02 Python
使用python生成杨辉三角形的示例代码
2018/08/29 Python
对Python3.x版本print函数左右对齐详解
2018/12/22 Python
Python multiprocess pool模块报错pickling error问题解决方法分析
2019/03/20 Python
通过Turtle库在Python中绘制一个鼠年福鼠
2020/02/03 Python
PyTorch中的C++扩展实现
2020/04/02 Python
jupyter notebook运行命令显示[*](解决办法)
2020/05/18 Python
python3.8.1+selenium实现登录滑块验证功能
2020/05/22 Python
python matplotlib库的基本使用
2020/09/23 Python
Django celery异步任务实现代码示例
2020/11/26 Python
python 自动识别并连接串口的实现
2021/01/19 Python
高中生毕业学习总结的自我评价
2013/11/14 职场文书
专科文秘应届生求职信
2013/11/18 职场文书
人代会标语
2014/06/30 职场文书
防灾减灾日活动总结
2014/08/26 职场文书
python实现的web监控系统
2021/04/27 Python
浅谈sql_@SelectProvider及使用注意说明
2021/08/04 Java/Android
Mysql超详细讲解死锁问题的理解
2022/04/01 MySQL