JavaScript網頁鎖屏效果程式碼例項

螞蟻小編發表於2017-03-27
JavaScript網頁

關於鎖屏效果，大家一定都不會陌生，因為我們們經常會用到，就拿電腦來說吧，通常會有這樣的功能，那就是當你在一定的時間呢沒有對電腦有任何操作的時候，它可能彈出一個鎖屏介面，需要輸入密碼之類的東西才能夠繼續操作，下面就介紹一下網頁版本的此功能是如何實現的，程式碼如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html><html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript">
window.onload=function(){
  if(document.cookie.indexOf('lock=1')!= -1){
    ShowContent(false);
  }
 
  //10s後鎖定，修改delay為你需要的時間，單位毫秒
  var delay = 10 * 1000,timer;
  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 ? 'block' : 'none';
    document.getElementById('dvPassword').style.display = show ? 'none' : 'block';
  }
 
  function check(){
    if(document.getElementById('txtPwd').value == '123'){
      document.cookie = 'lock=0';
      ShowContent(true);
      startTimer()//重新計時
      document.onmousemove = startTimer; //重新繫結滑鼠移動事件
    }
    else{
      alert('密碼不正確');
    }
  }
 
  document.onmousemove=startTimer;
  var obt=document.getElementById("bt");
  obt.onclick=function(){
    check();
  }
  startTimer();
}
</script>
</head>
<body>
<div id="dvContent">螞蟻部落歡迎您</div>
<div id="dvPassword" style="display:none">
  輸入密碼:<input type="password" id="txtPwd" /><input type="button" id="bt" value="確定"/>
</div>
</body>
</html>

上面的程式碼實現了鎖屏效果，因為應用了cookie來儲存網頁的狀態，所以必須在伺服器狀態下測試才會有效果。

一.程式碼註釋:

1.window.onload=function(){}，文件內容完全載入完畢再去執行函式中的程式碼。

2.if(document.cookie.indexOf('lock=1')!= -1){ShowContent(false);}，判斷指定的cookie是否存在，如果存在則呼叫ShowContent(false)函式，也就是實現鎖屏效果。

3.var delay = 10 * 1000,timer，宣告兩個變數，第一個鎖屏延遲時間，第二個是用作定時器函式的標識。

4. function startTimer()，此函式可以實現鎖屏倒數計時功能。5.clearTimeout(timer)，清除上一個定時器函式的執行。

6.timer = setTimeout(TimerHandler, delay)，採用定時器函式，指定的延遲時間之後執行TimerHandler函式，也就是進行鎖屏操作。

7.function TimerHandler(){}，此函式能夠實現鎖屏操作。

8.document.cookie = 'lock=1'，設定cookie，標識已經鎖屏。

9.document.onmousemove = null，解綁onmousemove事件處理函式。

10.ShowContent(false)，呼叫函式並且設定引數為false，就是進行鎖屏操作。

11.function ShowContent(show){}，此函式可以實現鎖屏和消除鎖屏操作。

12.document.getElementById('dvContent').style.display = show ? 'block' : 'none';document.getElementById('dvPassword').style.display = show ? 'none' : 'block'，這兩段程式碼實現了內容和鎖屏模組的顯示和隱藏控制。

13.function check(){}，此函式模擬了一個解鎖效果。

14.if(document.getElementById('txtPwd').value == '123')，如果輸入的密碼等於"123"，那麼就進行解鎖。

15.document.cookie = 'lock=0'，重新設定cookie值。

16.ShowContent(true)，解除鎖屏效果。

17.startTimer()，重新開始倒數計時效果。

18.document.onmousemove = startTimer，重新繫結onmousemove事件處理函式。

二.相關閱讀:

1.indexOf()函式可以參閱javascript indexOf()一章節。

2.setTimeout()函式可以參閱setTimeout()函式用法詳解一章節。

相關文章