javascript實現(xiàn)鎖定網(wǎng)頁、密碼解鎖效果(類似系統(tǒng)屏幕保護(hù)效果)
更新時間:2014年08月15日 11:18:36 投稿:junjie
這篇文章主要介紹了javascript實現(xiàn)鎖定網(wǎng)頁、密碼解鎖效果,跟Windows系統(tǒng)的屏幕保護(hù)效果類似,需要的朋友可以參考下
功能描述:打開一個網(wǎng)站的網(wǎng)頁,過5分鐘不動作,就會鎖定頁面,隱藏內(nèi)容容器,顯示一個容器用于輸入密碼,輸入正確的密碼來解鎖。鎖定后即使用戶刷新頁面,還是保留原來的狀態(tài)。如已經(jīng)鎖定的,需要繼續(xù)鎖定,否則顯示內(nèi)容。
示例代碼如下,通過document.onmouseover來實現(xiàn)多少分鐘沒有動作,使用計時器來實現(xiàn)。
<!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實現(xiàn)系統(tǒng)屏幕保護(hù)效果(鎖定網(wǎng)頁)</title>
</head>
<body>
<div id="dvContent">內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />內(nèi)容</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;//鎖定后移除鼠標(biāo)移動事件
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; //重新綁定鼠標(biāo)移動事件
}
else alert('密碼不正確?。?);
}
window.onload = function () {
document.onmousemove = startTimer;
startTimer();
}
</script>
</body>
</html>
相關(guān)文章
關(guān)于JS判斷圖片是否加載完成且獲取圖片寬度的方法
本篇文章小編為大家介紹,關(guān)于JS判斷圖片是否加載完成且獲取圖片寬度的方法,有需要的朋友可以參考一下2013-04-04
JS設(shè)計模式之觀察者模式實現(xiàn)實時改變頁面中金額數(shù)的方法
這篇文章主要介紹了JS設(shè)計模式之觀察者模式實現(xiàn)實時改變頁面中金額數(shù)的方法,結(jié)合實例形式對比分析了javascript基于觀察者模式實時改變頁面金額數(shù)的相關(guān)操作技巧,需要的朋友可以參考下2018-02-02
淺談一個webpack構(gòu)建速度優(yōu)化誤區(qū)
這篇文章主要介紹了淺談一個webpack構(gòu)建速度優(yōu)化誤區(qū),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-06-06

