Javascript to lock the web page password unlock effect (similar to system screen saver effect)

  • 2020-03-30 03:43:16
  • OfStack

Function description: open a web page, after 5 minutes of no action, will lock the page, hide the content container, show a container for entering the password, enter the correct password to unlock. Even if the user refreshes the page after locking, the original state remains. If already locked, need to continue to lock, otherwise display content.
 
The sample code, as shown below, implements how many minutes without action through document.onmouseover, using a timer.


<!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="Content-Type" content="text/html; charset=utf-8" />
<title>javascript Achieve system screen saver effect ( The lock page )</title>
</head>

<body>
<div id="dvContent"> content <br /> content <br /> content <br /> content <br /> content <br /> content </div>
<div id="dvPassword" style="display:none"> Enter password: <input type="password" id="txtPwd" /><input type="button" value=" determine " onclick="check()"/></div>
<script>
  if (document.cookie.indexOf('lock=1') != -1) ShowContent(false);
  var delay = 10 * 1000,timer;//Lock after 10s, modify the delay to be the time you need, in milliseconds
  function startTimer() {
    clearTimeout(timer);
    timer = setTimeout(TimerHandler, delay);
  }
  function TimerHandler() {
    document.cookie = 'lock=1';
    document.onmousemove = null;//Remove mouse movement event after locking
    ShowContent(false);
  }
  function ShowContent(show) {
    document.getElementById('dvContent').style.display = show ? 'block' : 'none';
    document.getElementById('dvPassword').style.display = show ? 'none' : 'block';
  }
  function check() {
    if (document.getElementById('txtPwd').value == '123') {
      document.cookie = 'lock=0';
      ShowContent(true);
      startTimer()//Again the timing
      document.onmousemove = startTimer; //Rebind the mouse movement event
    }
    else alert(' Incorrect password!! ');
  }
  window.onload = function () {
    document.onmousemove = startTimer;
    startTimer();
  }
</script>
</body>
</html>


Related articles: