防止设备因为闲置而自动调低亮度或锁定屏幕，确保屏幕始终保持开启状态
<!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>防止空闲锁屏/降亮度</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>
// 能够防止设备因为闲置而自动调低亮度或锁定屏幕
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>