js实现自动锁屏功能

1.使用场景

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

5s锁屏效果如下:

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 自动锁屏 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • js实现简单锁屏功能实例

    本文实例讲述了js实现简单锁屏功能的方法.分享给大家供大家参考.具体实现方法如下: //********* 锁屏DIV *************************** function LockScreen(tag,title,width,height,url) { if (tag) //锁屏 { var lockdiv = document.getElementById("lockscreen"); if (lockdiv!=null) { lockdiv.style.dis

  • js锁屏解屏通过对$.ajax进行封装实现

    jquery插件源码: /** * 对jquery中$.ajax进行封装,以便加入锁屏功能 * isAsync 是否为异步请求,默认为true * isLock 是否锁屏,默认是true * isCache 是否从浏览器缓存中加载信息,默认是fasle ***/ ;(function($) { $.fn.doPost = function(settings) { settings = jQuery.extend({ isAsync:true, type : "post", url :

  • 基于JavaScript实现全屏透明遮罩div层锁屏效果

    废话不多说了,直接给大家写js代码了,代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <tit

  • JS实现的添加弹出层并完成锁屏操作示例

    本文实例讲述了JS实现的添加弹出层并完成锁屏操作.分享给大家供大家参考,具体如下: 上图: 代码: <html> <head> <title>弹出层</title> <style type="text/css"> *{ padding:0px; margin:0px; } .up{ width:500px; height: 400px; border:1px solid silver; position: absolute;

  • js写一个弹出层并锁屏效果实现代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • js实现自动锁屏功能

    1.使用场景 有这么一个需求,开发了一套系统,当用户离开桌面或者一段时间不操作的话,需要把该系统所有打开页面锁定起来,就跟桌面锁屏一样,只能输入密码验证成功后,或者重新登录,才可以继续操作页面,如果刷新页面,也要保持锁定.就像下图一样.当然用户也可以手动触发锁屏.目的是防止他人随意操作系统的重要内容.那么该如何去实现呢? 5s锁屏效果如下: 2.思路 首先需要一个变量isLock表示页面是否锁定.由于多个页面需要共享这个数据,且刷新后依然能够获取到,所以我使用了localStorage储存在本地

  • 用JS创建一个录屏功能

    OBS studio很酷,但 JavaScript 更酷,现在,我们用 JavaScript 创建自己的录屏功能. 首先,创建一个HTML文件,包含记录按钮和一个播放标签, 内容如下: <!DOCTYPE html> <html> <head> <title>Parcel Sandbox</title> <meta charset="UTF-8" /> </head> <body> <

  • Android ScreenLockReceiver监听锁屏功能示例

    本文实例讲述了Android ScreenLockReceiver监听锁屏功能.分享给大家供大家参考,具体如下: 监听屏幕锁屏状态(注册接受者--执行业务--注销接受者) public class AppLockService extends Service { private ActivityManager am; private KeyguardManager keyguardManager; private LockScreenReceiver receiver; @Override pu

  • python实现windows倒计时锁屏功能

    python实现windows倒计时锁屏功能 # 倒计时锁屏 import time from ctypes import * def closewindows(closetime): while closetime>0: print(closetime) time.sleep(1) closetime-=1 user32 = windll.LoadLibrary('user32.dll') user32.LockWorkStation() if __name__ == "__main__

  • HTML+JS实现监控切屏功能

    目录 项目描述 记录离开页面 创建html 监控是否离开页面 监控是否切屏 记录时间 离开次数 项目描述 该项目是我在网上看其他博客的时候无意中看到的,看见别人居然能实现这种操作很好奇 项目要求做到 监控网页状态 记录离开次数 离开时间 记录离开页面 实现这个切换页面功能需要用到一个web的APIvisiblitychange visibilitychange - Web API 接口参考 | MDN (mozilla.org) Document.visibilityState - Web AP

  • 微信小程序实现手势图案锁屏功能

    本文实例为大家分享了微信小程序手势图案锁屏的具体代码,供大家参考,具体内容如下 参考 H5lock 效果图 WXML <view class="container"> <view class="reset" bindtap="resetPwd">重置密码</view> <view class="title">{{title}}</view> <canvas ca

  • 轻松实现Android锁屏功能

    锁屏需要引入设备超级管理员.在文档Android开发文档的Administration中有详细的说明.Android设备管理系统功能和控制访问. 主要有一下几个步骤: 1  创建广播接收者,实现DeviceAdminReceiver package com.andy.lockscreen; import android.app.admin.DeviceAdminReceiver; /** * @author Zhang,Tianyou * @version 2014年11月20日 下午9:51:

  • Android实现带页面切换的锁屏功能

    一个简单的Android 锁屏小Demo,可以设置左滑有滑,我简单的了解一下自定义锁屏,顺便总结了一下思路顺便画个图帮助理解. 我的效果图 代码思路 锁屏分为两块,一块是UI(自定义布局)另一块这就是服务了 自定义锁屏布局 ACTION_DOWN按下:中间的ImageView会变成另一种形态 ACTION_MOVE移动: 移动到左/右边,左/右ImageView形态也要发生变化, ACTION_UP抬起:判断滑动到左/右那边,或者回到最初位置 *服务 @Override public void

随机推荐