search

Home >Web Front-end >JS Tutorial >JavaScript realizes the effect of locking web pages and password unlocking (similar to the system screen saver effect)_javascript skills

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

WBOY
WBOYOriginal
2016-05-16 16:39:371469browse

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>

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：JQuery Tips related (1)----About $.Ready()_jqueryNext article：JQuery Tips related (1)----About $.Ready()_jquery

Related articles

See more