JavaScript menyedari kesan mengunci halaman web dan membuka kunci kata laluan (serupa dengan kesan penyelamat skrin sistem)

JavaScript menyedari kesan mengunci halaman web dan membuka kunci kata laluan (serupa dengan kesan penyelamat skrin sistem)_kemahiran javascript

WBOY

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

asal

1466 orang telah melayarinya

Penerangan fungsi: Buka halaman web tapak web dan jika tiada tindakan selama 5 minit, halaman akan dikunci, bekas kandungan akan disembunyikan dan bekas akan dipaparkan untuk memasukkan kata laluan kata laluan untuk membuka kuncinya. Walaupun pengguna menyegarkan halaman selepas dikunci, keadaan asal akan dikekalkan. Jika ia sudah dikunci, ia perlu terus dikunci, jika tidak kandungan akan dipaparkan.

Kod sampel adalah seperti berikut Document.onmouseover digunakan untuk menentukan berapa minit tiada tindakan, menggunakan pemasa.

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

Salin selepas log masuk