防止电脑息屏 html

java 复制代码
<!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>