1.使用場景

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

5s鎖屏效果如下：

2.思路 首先需要一個變量isLock表示頁面是否鎖定。由于多個頁面需要共享這個數據，且刷新后依然能夠獲取到，所以我使用了localStorage儲存在本地。isLock為true的時候就展示鎖屏樣式。 設置一個定時器 setTimeout，比如代碼中設置頁面無操作n秒后鎖屏，那么n秒后執行鎖屏操作lockPro()，即var timer = setTimeout(lockPro, n) 需要監測window的mousemove事件，監測用戶鼠標移動動作，判斷屏幕有沒有被鎖定，如果已經鎖定，則不做任何操作，如果屏幕還沒有鎖定，需要設置一個變量moveTime記錄每次鼠標移動時的時間，并保存到localStorage中，并且清除定時器timer，重新計時。 setInterval輪詢監聽isLock，每1s獲取一次，以便及時拿到鎖屏狀態。 鎖屏操作lockPro，判斷當前時間與上次鼠標操作的時間即moveTime的差值，如果小于n秒，則認為不需要鎖屏，如果大于等于n秒，則需要鎖屏，并更新鎖屏狀態isLock 判斷狀態為鎖定后，清除定時器timer，結束定時任務。 判斷狀態為未鎖定后，重置定時器，即先清除timer，再設置一個timer 退出登錄時，清除本地緩存isLock。 密碼解鎖時，清除本地緩存isLock，重新設置moveTime，重置定時器。

有點繞，需要好好捋一捋。

3.代碼實現

以下代碼是不完全代碼，html結構省略了，大家自由發揮。

// app.vuedata () { 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 = truethis.clearLocaPro() } else {// console.log(’當前沒鎖屏’)this.isLock = falsethis.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 自動鎖屏 內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！