项目完整示例代码

访问页面后默认自动开启常亮

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 前端保持屏幕常亮示例 by hexingxing.cn</title>
</head>
<body>
    <h1> 屏幕常亮示例</h1>
    <p> 打开此页面后,屏幕会自动保持常亮。</p>

    <script>
        let wakeLock = null;

        // 检查浏览器是否支持 wakeLock
        if ('wakeLock' in navigator) {
            // 请求保持屏幕常亮
            async function requestWakeLock() {
                try {
                    wakeLock = await navigator.wakeLock.request('screen');
                    console.log(" 屏幕已保持常亮");

                    // 监听 wakeLock 的释放事件
                    wakeLock.addEventListener('release', () => {
                        console.log(" 屏幕常亮已释放");
                    });
                } catch (err) {
                    console.error(`请求屏幕常亮失败: ${err.name}, ${err.message}`);
                }
            }

            // 页面加载时请求屏幕常亮
            requestWakeLock();

            // 页面失去焦点时重新请求屏幕常亮
            document.addEventListener('visibilitychange', () => {
                if (wakeLock !== null && document.visibilityState === 'visible') {
                    requestWakeLock();
                }
            });
        } else {
            console.log(" 当前浏览器不支持屏幕常亮功能");
        }
    </script>
</body>
</html>

访问页面后手动点击按钮开启

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 屏幕常亮支持测试 by hexingxing.cn</title>
</head>
<body>
    <h1> 屏幕常亮示例</h1>
    <p> 此页面会尝试保持屏幕常亮。</p>
    <button id="toggleButton"> 开启屏幕常亮</button>

    <script>
        let wakeLock = null;
        const toggleButton = document.getElementById('toggleButton');

        // 检查浏览器是否支持 wakeLock
        if ('wakeLock' in navigator) {
            async function requestWakeLock() {
                try {
                    wakeLock = await navigator.wakeLock.request('screen');
                    console.log(" 屏幕已保持常亮");
                    toggleButton.textContent = " 关闭屏幕常亮";

                    wakeLock.addEventListener('release', () => {
                        console.log(" 屏幕常亮已释放");
                        toggleButton.textContent = " 开启屏幕常亮";
                    });
                } catch (err) {
                    console.error(`请求屏幕常亮失败: ${err.name}, ${err.message}`);
                }
            }

            async function releaseWakeLock() {
                if (wakeLock !== null) {
                    await wakeLock.release();
                    wakeLock = null;
                    console.log(" 屏幕常亮已手动释放");
                }
            }

            toggleButton.addEventListener('click', () => {
                if (wakeLock === null) {
                    requestWakeLock();
                } else {
                    releaseWakeLock();
                }
            });

            // 页面失去焦点时重新请求屏幕常亮
            document.addEventListener('visibilitychange', () => {
                if (wakeLock !== null && document.visibilityState === 'visible') {
                    requestWakeLock();
                }
            });
        } else {
            console.log(" 当前浏览器不支持屏幕常亮功能");
            toggleButton.disabled = true;
            toggleButton.textContent = " 屏幕常亮不支持";
        }
    </script>
</body>
</html>

检测是否支持常亮

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 屏幕常亮支持测试 by hexingxing.cn</title>
</head>
<body>
    <h1> 屏幕常亮支持测试 by hexingxing.cn</h1>
    <p id="supportMessage"></p>

    <script>
        const supportMessage = document.getElementById('supportMessage');
        
        if ('wakeLock' in navigator) {
            supportMessage.textContent = " 当前浏览器支持 wakeLock API。屏幕常亮已启用。";
            // 在此处可以调用保持屏幕常亮的函数
        } else {
            supportMessage.textContent = " 当前浏览器不支持 wakeLock API。";
        }
    </script>
</body>
</html>

项目功能成品方案

https://get.hexingxing.cn/time

https://hexingxing.cn/keep-screen-on


友情提示:本站所有文章,如无特殊说明或标注,均为何星星原创发布。与此同时,趋于近年来本站的文章内容频繁被他站盗用与机器采集,现已全局禁用网站文字内容操作,了解详情或转载文章请 点此 继续!
分类: 技术维新

0 条评论

发表回复

Avatar placeholder

您的电子邮箱地址不会被公开。 必填项已用 * 标注