js realizes automatic lock screen function

index.html

<div id="app">
  <button @click="unlock">test open modal</button>
  <div :style="{'display': isLock ? 'none' : 'block' }" class="modal">
    <div class="modal-content">
      <span class="close-btn" @click="handleLock">&times;</span>
    </div>
      <div class="modal-content">
        <input type="password" :disabled="isLock">
      </div>
    </div>
    
  </div> 
</div>

js-realizes-automatic-lock-screen-function.markdown

js realizes automatic lock screen function

A Pen by Edward Lance Lorilla on CodePen.

License.

script.js

new Vue({
  data () {
    return {
      timeOut: 5000,
      timer: null,
      isLock:'false'
    }
  },
  mounted () {
    this.timer = setTimeout(this.lockPro, this.timeOut)
    // Set the operating time for the first time
    localStorage.setItem('moveTime', Date.now())
    // First judgment state
    this.modalStatus()
    // Polling monitoring status
    setInterval(this.modalStatus, 1000)
    // listen to mouse events
    this.events()
  },
  methods:{
    events() {
      window.onmousemove = () => {
        // console.log('Mouse moved')
        if (!this.isLock) {
          localStorage.setItem('moveTime', Date.now())
          this.clearLocaPro('continue')
        }
      }
    },
    modalStatus() {
      if (localStorage.getItem('isLock') ==='true') {
        console.log('The screen is locked')
        this.isLock = true
        this.clearLocaPro()
      } else {
        console.log('The screen is not currently locked')
        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)
      }
    },
    // Manually lock
    handleLock(){
      this.clearLocaPro()
      localStorage.setItem('isLock','true')
    },
    // Password unlock
    unlock(){
      localStorage.removeItem('isLock')
      localStorage.setItem('moveTime', Date.now())
      this.clearLocaPro('continue')
    }
    // Don't forget to log out and also clear isLock
  }
}).$mount('#app')

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>

style.css

.modal {
  position: fixed; 
  padding-top: 50px;
  left: 0; 
  top: 0;
  width: 100%;
  height: 100%; 
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
  position: relative; 
  background-color: white;
  padding: 20px; 
  margin: auto; 
  width: 75%;  
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}
.close-btn {
  float: right; 
  color: lightgray; 
  font-size: 24px;  
  font-weight: bold;
}
.close-btn:hover {
  color: darkgray;
}
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}
@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}