JavaScript realizes the effect of locking web pages and password unlocking (similar to the system screen saver effect)

JavaScript realizes the effect of locking web pages and password unlocking (similar to the system screen saver effect)_javascript skills

WBOY

Release： 2016-05-16 16:39:37

Original

1478 people have browsed it

Function description: Open a webpage of a website and if there is no action for 5 minutes, the page will be locked, the content container will be hidden, and a container will be displayed for entering the password. Enter the correct password to unlock. Even if the user refreshes the page after locking, the original state will be retained. If it is already locked, it needs to continue to be locked, otherwise the content will be displayed.

The sample code is as follows. Document.onmouseover is used to determine how many minutes there will be no action, 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实现系统屏幕保护效果(锁定网页)</title>
</head>

<body>
<div id="dvContent">内容<br />内容<br />内容<br />内容<br />内容<br />内容</div>
<div id="dvPassword" style="display:none">输入密码：<input type="password" id="txtPwd" /><input type="button" value="确定" onclick="check()"/></div>
<script>
  if (document.cookie.indexOf('lock=1') != -1) ShowContent(false);
  var delay = 10 * 1000,timer;//10s后锁定，修改delay为你需要的时间，单位毫秒
  function startTimer() {
    clearTimeout(timer);
    timer = setTimeout(TimerHandler, delay);
  }
  function TimerHandler() {
    document.cookie = 'lock=1';
    document.onmousemove = null;//锁定后移除鼠标移动事件
    ShowContent(false);
  }
  function ShowContent(show) {
    document.getElementById('dvContent').style.display = show &#63; 'block' : 'none';
    document.getElementById('dvPassword').style.display = show &#63; 'none' : 'block';
  }
  function check() {
    if (document.getElementById('txtPwd').value == '123') {
      document.cookie = 'lock=0';
      ShowContent(true);
      startTimer()//重新计时
      document.onmousemove = startTimer; //重新绑定鼠标移动事件
    }
    else alert('密码不正确！！');
  }
  window.onload = function () {
    document.onmousemove = startTimer;
    startTimer();
  }
</script>
</body>
</html>

Copy after login