Screen Wake Lock API

防止设备因为闲置而自动调低亮度或锁定屏幕，确保屏幕始终保持开启状态

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />
    <title>Screen Wake Lock API</title>
  </head>
  <body>
    <strong>能够防止设备因为闲置而自动调低亮度或锁定屏幕, 确保屏幕始终保持开启状态</strong>
    <hr>
    <button type="button" class="btn-lock">锁定</button>
    <button type="button" class="btn-bright">释放</button>
    <br /><br />
    <div style="display: flex; align-items: center">
      <span>released status: &nbsp;</span>
      <h3 class="lock-status"></h3>
    </div>
 
    <script>
      // Screen Wake Lock API
      // 能够防止设备因为闲置而自动调低亮度或锁定屏幕
 
      const lockBtn = document.querySelector('.btn-lock');
      const brightBtn = document.querySelector('.btn-bright');
      const lockStatus = document.querySelector('.lock-status');
 
      /** @type {WakeLockSentinel} */
      let wakeLock = null;
      lockBtn.addEventListener('click', async () => {
        wakeLock = await navigator.wakeLock.request('screen');
        console.log('唤醒锁已激活 => ', wakeLock);
        lockStatus.textContent = '唤醒锁已激活';
 
        wakeLock.addEventListener('release', () => {
          console.log('唤醒锁已释放 => ', wakeLock);
          lockStatus.textContent = '唤醒锁已释放';
        });
      });
      brightBtn.addEventListener('click', async () => {
        if (!wakeLock) return;
 
        await wakeLock.release();
        wakeLock = null;
      });
    </script>
  </body>
</html>

posted @ 2024-04-28 16:38 _clai 阅读(7) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 终于写完轮子一部分：tcp代理了，记录一下
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理

公告

昵称： _clai
园龄： 4年11个月
粉丝： 0
关注： 7

+加关注

2025年3月

日

一

二

三

四

五

六

随笔分类

随笔档案

阅读排行榜

评论排行榜

1. uniapp 文件管理器(文件选择)(4)

_clai

Screen Wake Lock API

Screen Wake Lock API

公告

搜索

常用链接

最新随笔

随笔分类

随笔档案

阅读排行榜

评论排行榜

最新评论

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />
	<title>Screen Wake Lock API</title>
	</head>
	<body>
	<strong>能够防止设备因为闲置而自动调低亮度或锁定屏幕, 确保屏幕始终保持开启状态</strong>
	<hr>
	<button type="button" class="btn-lock">锁定</button>
	<button type="button" class="btn-bright">释放</button>
	<br /><br />
	<div style="display: flex; align-items: center">
	<span>released status:  </span>
	<h3 class="lock-status"></h3>
	</div>

	<script>
	// Screen Wake Lock API
	// 能够防止设备因为闲置而自动调低亮度或锁定屏幕

	const lockBtn = document.querySelector('.btn-lock');
	const brightBtn = document.querySelector('.btn-bright');
	const lockStatus = document.querySelector('.lock-status');

	/** @type {WakeLockSentinel} */
	let wakeLock = null;
	lockBtn.addEventListener('click', async () => {
	wakeLock = await navigator.wakeLock.request('screen');
	console.log('唤醒锁已激活 => ', wakeLock);
	lockStatus.textContent = '唤醒锁已激活';

	wakeLock.addEventListener('release', () => {
	console.log('唤醒锁已释放 => ', wakeLock);
	lockStatus.textContent = '唤醒锁已释放';
	});
	});
	brightBtn.addEventListener('click', async () => {
	if (!wakeLock) return;

	await wakeLock.release();
	wakeLock = null;
	});
	</script>
	</body>
	</html>