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 相关文章推荐
UserData用法总结 lanyu出品
Jul 01 Javascript
jquery提升性能最佳实践小结
Dec 06 Javascript
jquery分页插件AmSetPager(自写)
Apr 15 Javascript
jQuery中$.fn的用法示例介绍
Nov 05 Javascript
javascript操作字符串的原生方法
Dec 22 Javascript
jQuery实现左侧导航模块的显示与隐藏效果
Jul 04 Javascript
Javascript面试经典套路reduce函数查重
Mar 23 Javascript
解决VUEX刷新的时候出现数据消失
Jul 03 Javascript
详解react服务端渲染(同构)的方法
Sep 21 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
Mar 14 Javascript
在layui中select更改后生效的方法
Sep 05 Javascript
JS实现多选框的操作
Jun 24 Javascript
如何将JavaScript将数组转为树形结构
Jun 02 #Javascript
关于antd tree 和父子组件之间的传值问题(react 总结)
使用react+redux实现计数器功能及遇到问题
微信小程序基础教程之echart的使用
vue实现水波涟漪效果的点击反馈指令
vue 实现上传组件
May 31 #Vue.js
vue基于Teleport实现Modal组件
You might like
打造计数器DIY三步曲(中)
2006/10/09 PHP
使用PHP批量生成随机用户名
2008/07/10 PHP
PHP 多进程 解决难题
2009/06/22 PHP
ThinkPHP分页实例
2014/10/15 PHP
让ThinkPHP支持大小写url地址访问的方法
2014/10/31 PHP
PHP商品秒杀问题解决方案实例详解【mysql与redis】
2019/07/22 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
检测jQuery.js是否已加载的判断代码
2011/05/20 Javascript
js写的方法实现上传图片之后查看大图
2014/03/05 Javascript
jQuery 隐藏和显示 input 默认值示例
2014/06/03 Javascript
JavaScript基础知识学习笔记
2014/12/02 Javascript
同步异步动态引入js文件的几种方法总结
2016/09/23 Javascript
JS设置随机出现2个数字的实例代码
2017/07/19 Javascript
js 判断一个数字是不是2的n次方幂的实例
2017/11/26 Javascript
JS 使用 window对象的print方法实现分页打印功能
2018/05/16 Javascript
基于Vue的延迟加载插件vue-view-lazy
2018/05/21 Javascript
详解ES6中的 Set Map 数据结构学习总结
2018/11/06 Javascript
小程序实现上下切换位置
2020/11/16 Javascript
Python的函数嵌套的使用方法
2014/01/24 Python
在Python中操作日期和时间之gmtime()方法的使用
2015/05/22 Python
Python的条件语句与运算符优先级详解
2015/10/13 Python
Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
2018/05/24 Python
Django中reverse反转并且传递参数的方法
2019/08/06 Python
Python判断字符串是否xx开始或结尾的示例
2019/08/08 Python
python matplotlib包图像配色方案分享
2020/03/14 Python
python爬取网易云音乐热歌榜实例代码
2020/08/07 Python
python中的插入排序的简单用法
2021/01/19 Python
基于 HTML5 Canvas实现 的交互式地铁线路图
2018/03/05 HTML / CSS
大学学年自我鉴定
2013/10/28 职场文书
小学美术教学反思
2014/02/01 职场文书
校园安全广播稿
2014/02/08 职场文书
员工三分钟演讲稿
2014/08/19 职场文书
2015年学校信息技术工作总结
2015/05/25 职场文书
导游词之广东佛山(南风古灶)
2019/09/24 职场文书
分享几个简单MySQL优化小妙招
2022/03/31 MySQL
详解PyTorch模型保存与加载
2022/04/28 Python