js實現自動鎖屏功能

阿新 • • 發佈：2021-06-03

1.使用場景

有這麼一個需求，開發了一套系統，當用戶離開桌面或者一段時間不操作的話，需要把該系統所有開啟頁面鎖定起來，就跟桌面鎖屏一樣，只能輸入密碼驗證成功後，或者重新登入，才可以繼續操作頁面，如果重新整理頁面，也要保持鎖定。就像下圖一樣。當然使用者也可以手動觸發鎖屏。目的是防止他人隨意作業系統的重要內容。那麼該如何去實現呢？

5s鎖屏效果如下：

js實現自動鎖屏功能

2.思路

首先需要一個變數isLock表示頁面是否鎖定。由於多個頁面需要共享這個資料，且重新整理後依然能夠獲取到，所以我使用了localStorage儲存在本地。isLock為true的時候就展示鎖屏樣式。
設定一個定時器 setTimeout，比如程式碼中設定頁面無操作n秒後鎖屏，那麼n秒後執行鎖屏操作lockPro()，即var timer = setTimeout(lockPro,n)

需要監測window的mousemove事件，監測使用者滑鼠移動動作，判斷螢幕有沒有被鎖定，如果已經鎖定，則不做任何操作，如果螢幕還沒有鎖定，需要設定一個變數www.cppcns.commoveTime記錄每次滑鼠移動時的時間，並儲存到localStorage中，並且清除定時器timer，重新計時。
setInterval輪詢監聽isLock，每1s獲取一次，以便及時拿到鎖屏狀態。
鎖屏操作lockPro，判斷當前時間與上次滑鼠操作的時間即moveTime的差值，如果小於n秒，則認為不需要鎖屏，如果大於等於n秒，則需要鎖屏，並更新鎖屏狀態isLock
判斷狀態為鎖定後，清除定時器timer，結束定時任務。

判斷狀態為未鎖定後，重置定時器，即先清除timewww.cppcns.comr，再設定一個timer
退出登入時，清除本地快取isLock。
密碼解鎖時，清除本地快取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('moveTiwww.cppcns.comme') < 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)
      }
    },// 手動鎖定
  www.cppcns.com  handleLock(){
      this.clearLocaPro()
      localStorage.setItem('isLock','true')
    },// 密碼解鎖
    unlock(){
      localStorage.removeItem('isLock')
      localStorage.setItem('moveTime',Date.now())
      this.clearLocaPro('continue')
    }，
    ...
    // 別忘了退出登入也要清除isLock
}

到此這篇關於js實現自動鎖屏功能的文章就介紹到這了,更多相關js 自動鎖屏內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！