JavaScript réalise l'effet de verrouillage des pages Web et de déverrouillage du mot de passe (similaire à l'effet d'économiseur d'écran du système)_compétences Javascript-js tutoriel-php.cn

JavaScript réalise l'effet de verrouillage des pages Web et de déverrouillage du mot de passe (similaire à l'effet d'économiseur d'écran du système)_compétences Javascript

WBOY

Libérer： 2016-05-16 16:39:37

original

1405 Les gens l'ont consulté

Description de la fonction : ouvrez une page Web d'un site Web et s'il n'y a aucune action pendant 5 minutes, la page sera verrouillée, le conteneur de contenu sera masqué et un conteneur sera affiché pour saisir le mot de passe. mot de passe pour le déverrouiller. Même si l'utilisateur actualise la page après le verrouillage, l'état d'origine sera conservé. S'il est déjà verrouillé, il doit continuer à l'être, sinon le contenu sera affiché.

L'exemple de code est le suivant. Document.onmouseover est utilisé pour déterminer combien de minutes il n'y aura aucune action, à l'aide d'une minuterie.

<!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>

Copier après la connexion