Heim > Artikel > Web-Frontend > JavaScript erkennt den Effekt des Sperrens von Webseiten und des Entsperrens von Passwörtern (ähnlich dem Effekt des Systembildschirmschoners)_Javascript-Fähigkeiten

JavaScript erkennt den Effekt des Sperrens von Webseiten und des Entsperrens von Passwörtern (ähnlich dem Effekt des Systembildschirmschoners)_Javascript-Fähigkeiten

WBOYOriginal: 2016-05-16 16:39:371432Durchsuche

Funktionsbeschreibung: Öffnen Sie eine Webseite einer Website. Wenn 5 Minuten lang keine Aktion erfolgt, wird die Seite gesperrt, der Inhaltscontainer ausgeblendet und ein Container zur Eingabe des richtigen Passworts angezeigt Passwort, um es zu entsperren. Selbst wenn der Benutzer die Seite nach dem Sperren aktualisiert, bleibt der ursprüngliche Zustand erhalten. Wenn es bereits gesperrt ist, muss es weiterhin gesperrt werden, sonst wird der Inhalt angezeigt.

Der Beispielcode lautet wie folgt: Mithilfe eines Timers wird ermittelt, wie viele Minuten lang keine Aktion ausgeführt wird.

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：JQuery-Tipps im Zusammenhang mit (1)----Über $.Ready()_jqueryNächster Artikel：JQuery-Tipps im Zusammenhang mit (1)----Über $.Ready()_jquery

In Verbindung stehende Artikel

Mehr sehen