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

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

WBOYasal: 2016-05-16 16:39:371397semak imbas

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>

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Petua JQuery berkaitan (1)----Mengenai $.Ready()_jqueryArtikel seterusnya：Petua JQuery berkaitan (1)----Mengenai $.Ready()_jquery

Artikel berkaitan

Lihat lagi