1.使用場景

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

5s鎖屏效果如下：

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

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

3.代碼實現(xiàn)

以下代碼是不完全代碼，html結(jié)構(gòu)省略了，大家自由發(fā)揮。

// app.vuedata () { return { timeOut: 5000, timer: null, isLock: ’false’ }},mounted () { this.timer = setTimeout(this.lockPro, this.timeOut) // 首次設置操作時間 localStorage.setItem(’moveTime’, Date.now()) // 首次判斷狀態(tài) this.modalStatus() // 輪詢監(jiān)聽狀態(tài) setInterval(this.modalStatus, 1000) // 監(jiān)聽鼠標事件 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實現(xiàn)自動鎖屏功能的文章就介紹到這了,更多相關js 自動鎖屏 內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持好吧啦網(wǎng)！