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 相关文章推荐
ExtJS 2.0 实用简明教程之布局概述
Apr 29 Javascript
用Javascript数组处理多个字符串的连接问题
Aug 20 Javascript
用JavaScript仿PS里的羽化效果代码
Dec 20 Javascript
javascript SpiderMonkey中的函数序列化如何进行
Dec 05 Javascript
JQuery写动态树示例代码
Jul 31 Javascript
JavaScript实现多维数组的方法
Nov 20 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
Mar 13 Javascript
JavaScript判断按钮被点击的方法
Dec 13 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
Jul 22 Javascript
一个极为简单的requirejs实现方法
Oct 20 Javascript
vue 使用高德地图vue-amap组件过程解析
Sep 07 Javascript
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
如何将JavaScript将数组转为树形结构
Jun 02 #Javascript
关于antd tree 和父子组件之间的传值问题(react 总结)
使用react+redux实现计数器功能及遇到问题
微信小程序基础教程之echart的使用
vue实现水波涟漪效果的点击反馈指令
vue 实现上传组件
May 31 #Vue.js
vue基于Teleport实现Modal组件
You might like
PHP 显示客户端IP与服务器IP的代码
2010/10/12 PHP
PHP strip_tags()去除HTML、XML以及PHP的标签介绍
2014/02/18 PHP
在PHP中使用FastCGI解析漏洞及修复方案
2015/11/10 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
PHP实现负载均衡的加权轮询方法分析
2018/08/22 PHP
PHP扩展Swoole实现实时异步任务队列示例
2019/04/13 PHP
有关js的变量作用域和this指针的讨论
2010/12/16 Javascript
JS刷新框架外页面七种实现代码
2013/02/18 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
2013/04/01 Javascript
jquery实现按Enter键触发事件示例
2013/09/10 Javascript
jquery实现省市select下拉框的替换(示例代码)
2014/02/22 Javascript
JavaScript通过正则表达式实现表单验证电话号码
2014/03/07 Javascript
angularJS 中input示例分享
2015/02/09 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
2015/08/21 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
JavaScript的==运算详解
2016/07/20 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
2016/08/29 Javascript
有关文件上传 非ajax提交 得到后台数据问题
2016/10/12 Javascript
JavaScript实现经典排序算法之选择排序
2016/12/28 Javascript
node-red File读取好保存实例讲解
2019/09/11 Javascript
[02:38]DOTA2超级联赛专访Loda 认为IG世界最强
2013/05/27 DOTA
python中cPickle用法例子分享
2014/01/03 Python
Python中__new__与__init__方法的区别详解
2015/05/04 Python
Python Matplotlib库入门指南
2015/05/18 Python
给Python入门者的一些编程建议
2015/06/15 Python
Python的Django框架中从url中捕捉文本的方法
2015/07/20 Python
Python使用到第三方库PyMuPDF图片与pdf相互转换
2019/05/03 Python
详解python中的线程与线程池
2019/05/10 Python
python将字典列表导出为Excel文件的方法
2019/09/02 Python
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
Skechers越南官方网站:来自美国的运动休闲品牌
2021/02/22 全球购物
蟋蟀的住宅教学反思
2014/04/26 职场文书
纪检干部现实表现材料
2014/08/21 职场文书
关于十八大的演讲稿
2014/09/15 职场文书
浅谈Redis跟MySQL的双写问题解决方案
2022/02/24 Redis
Python Pygame实战之塔防游戏的实现
2022/03/17 Python