当前位置：首页 > news >正文

防止电脑息屏 html

news 2025/7/18 10:02:07

防止电脑息屏 html

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>防息屏+防重复点击方案</title><!-- NoSleep.js 用于兼容旧版浏览器 --><script src="https://cdn.jsdelivr.net/npm/nosleep.js@0.12.0/dist/NoSleep.min.js"></script>
</head>
<body><button id="startBtn">启动防息屏</button><button id="timerBtn">测试按钮(防重复点击)</button><script>
// 第一部分：防息屏核心逻辑（兼容多浏览器）
let wakeLock = null;
let noSleep = new NoSleep();
let isIE = /*@cc_on!@*/false || !!document.documentMode; // IE检测[10]// 现代浏览器方案
async function modernWakeLock() {if ('wakeLock' in navigator) {try {wakeLock = await navigator.wakeLock.request('screen');// 监听页面可见性变化document.addEventListener('visibilitychange', async () => {if (document.visibilityState === 'visible' && !wakeLock) {wakeLock = await navigator.wakeLock.request('screen');}});} catch(err) {console.log('Wake Lock API不可用，回退到NoSleep.js');noSleep.enable(); // 自动启用备选方案[2][9]}} else {noSleep.enable();}
}// IE浏览器方案
function IEWakeLock() {if(isIE && window.ActiveXObject) {try {const objWs = new ActiveXObject("Wscript.Shell");setInterval(() => objWs.SendKeys("{SCROLLLOCK}"), 60000);} catch(e) {alert("请启用ActiveX控件！");}}
}// 第二部分：防重复点击逻辑（通用方案）
let clickTimer = null;
document.getElementById('timerBtn').addEventListener('click', function() {const btn = this;btn.disabled = true;btn.textContent = `请等待(30秒)`;clickTimer = setInterval(() => {const remain = parseInt(btn.textContent.match(/\d+/)[0]) - 1;btn.textContent = remain > 0 ? `请等待(${remain}秒)` : "测试按钮";if(remain <= 0) {clearInterval(clickTimer);btn.disabled = false;}}, 1000);
});// 第三部分：启动逻辑（需用户交互）
document.getElementById('startBtn').addEventListener('click', function() {if(isIE) {IEWakeLock();} else {modernWakeLock();// 尝试自动进入全屏模式if(document.documentElement.requestFullscreen) {document.documentElement.requestFullscreen();}}this.disabled = true;this.textContent = "防息屏已激活";
});// 第四部分：安全释放资源
window.addEventListener('beforeunload', () => {if(wakeLock) wakeLock.release();noSleep.disable();clearInterval(clickTimer);
});
</script></body>
</html>