Function description: Open a website's web page and do not move after 5 minutes, the page will be locked, the content container will be hidden, and a container will be displayed for entering the password. Enter the correct password to unlock. After locking, even if the user refreshes the page, the original state remains. If it has been locked, it needs to continue locking, otherwise the content will be displayed.
The sample code is as follows: Use document.onmouseover to achieve no action for many minutes, and use a timer to implement it.
<!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 realizes system screen protection effect (lock web page)</title></head><body><div id="dvContent">Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content</div><div id="dvPassword" style="display:none">Enter password: <input type="password" id="txtPwd" /><input type="button" value="OK" onclick="check()"//</div><script> if (document.cookie.indexOf('lock=1') != -1) ShowContent(false); var delay = 10 * 1000,timer;//Lock after 10s, modify delay to the time you need, in milliseconds function startTimer() { clearTimeout(timer); timer = setTimeout(TimerHandler, delay); } function TimerHandler() { document.cookie = 'lock=1'; document.onmousemove = null;//Remove the mouse movement event after locking 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()//Retime document.onmousemove = startTimer; //Rebind mouse movement event} else alert('Password is incorrect! ! '); } window.onload = function () { document.onmousemove = startTimer; startTimer(); }</script></body></html>