Maison > Article > interface Web > 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

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

WBOYoriginal: 2016-05-16 16:39:371432parcourir

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>

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Conseils JQuery liés (1) ----À propos de $.Ready()_jqueryArticle suivant：Conseils JQuery liés (1) ----À propos de $.Ready()_jquery

Articles Liés

Voir plus