HTML实现电池状态检测与电量百分比展示
一、核心技术基础
HTML本身无法直接获取设备电池状态，需要结合浏览器提供的Battery Status API实现功能。该API是Web API的一部分，允许网页访问设备电池的信息，包括当前电量百分比、是否正在充电、充电/放电剩余时间等数据，目前主流现代浏览器（Chrome、Edge、Firefox等）均已支持该接口。
二、Battery Status API核心属性
调用API后会返回一个BatteryManager对象，包含以下核心属性：
charging：布尔值，表示设备当前是否正在充电
chargingTime：数值，表示设备完全充满所需的剩余秒数，若正在充电且可计算则返回对应数值，否则返回
InfinitydischargingTime：数值，表示设备完全放电所需的剩余秒数，若未充电且可计算则返回对应数值，否则返回
Infinitylevel：数值，范围0-1，表示当前电量百分比，0为0%，1为100%
同时该对象还支持四个事件监听：chargingchange（充电状态变化触发）、chargingtimechange（充满剩余时间变化触发）、dischargingtimechange（放电剩余时间变化触发）、levelchange（电量百分比变化触发）。
三、完整实现示例
以下是一个完整的HTML页面示例，实现电池状态检测与电量可视化展示：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>电池状态检测</title>
</head>
<body>
<h3>设备电池状态</h3>
<div id="batteryContainer">
<div id="batteryShell">
<div id="batteryLevel"></div>
</div>
<p id="levelText">正在获取电量...</p>
<p id="chargingStatus"></p>
<p id="timeInfo"></p>
</div>
<script>
// 检测浏览器是否支持Battery Status API
if ('getBattery' in navigator) {
navigator.getBattery().then(function(battery) {
// 初始化电量显示
function updateLevel() {
const level = battery.level;
const percent = Math.round(level * 100);
const levelBar = document.getElementById('batteryLevel');
const levelText = document.getElementById('levelText');
// 设置电量条宽度和颜色
levelBar.style.width = percent + '%';
if (percent <= 20) {
levelBar.style.backgroundColor = '#ff4444';
} else if (percent <= 50) {
levelBar.style.backgroundColor = '#ffaa00';
} else {
levelBar.style.backgroundColor = '#00cc66';
}
levelText.textContent = '当前电量：' + percent + '%';
}
// 更新充电状态
function updateCharging() {
const chargingStatus = document.getElementById('chargingStatus');
if (battery.charging) {
chargingStatus.textContent = '当前状态：正在充电';
} else {
chargingStatus.textContent = '当前状态：未充电';
}
}
// 更新剩余时间信息
function updateTimeInfo() {
const timeInfo = document.getElementById('timeInfo');
if (battery.charging) {
if (battery.chargingTime !== Infinity) {
const minutes = Math.round(battery.chargingTime / 60);
timeInfo.textContent = '预计充满剩余：' + minutes + '分钟';
} else {
timeInfo.textContent = '预计充满剩余：计算中...';
}
} else {
if (battery.dischargingTime !== Infinity) {
const hours = Math.floor(battery.dischargingTime / 3600);
const minutes = Math.round((battery.dischargingTime % 3600) / 60);
timeInfo.textContent = '预计可用剩余：' + hours + '小时' + minutes + '分钟';
} else {
timeInfo.textContent = '预计可用剩余：计算中...';
}
}
}
// 初始调用更新函数
updateLevel();
updateCharging();
updateTimeInfo();
// 监听电量变化事件
battery.addEventListener('levelchange', updateLevel);
// 监听充电状态变化事件
battery.addEventListener('chargingchange', updateCharging);
// 监听充电剩余时间变化事件
battery.addEventListener('chargingtimechange', updateTimeInfo);
// 监听放电剩余时间变化事件
battery.addEventListener('dischargingtimechange', updateTimeInfo);
});
} else {
document.getElementById('batteryContainer').innerHTML = '<p>当前浏览器不支持Battery Status API，无法获取电池状态</p>';
}
</script>
</body>
</html>四、样式补充说明
上述示例中的电池外壳和电量条的样式可以通过CSS实现，以下是配套的基础样式代码：
#batteryShell {
width: 200px;
height: 60px;
border: 3px solid #333;
border-radius: 8px;
position: relative;
margin-bottom: 10px;
}
#batteryShell::after {
content: '';
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 20px;
background-color: #333;
border-radius: 0 4px 4px 0;
}
#batteryLevel {
height: 100%;
width: 0%;
border-radius: 5px;
transition: width 0.5s ease, background-color 0.5s ease;
}
#levelText, #chargingStatus, #timeInfo {
margin: 5px 0;
font-size: 14px;
}五、注意事项
Battery Status API需要在安全上下文（HTTPS协议或本地localhost环境）中才能正常使用，普通HTTP协议下可能无法调用
部分浏览器可能会限制该API的调用频率，或者需要用户授权才能访问，实际使用时需要做好兼容性处理
如果设备没有电池（如台式电脑），
level属性会返回1，charging属性会返回true，需要在代码中做对应的逻辑判断API返回的
chargingTime和dischargingTime在无法计算时会返回Infinity，展示时需要对该值做特殊处理，避免显示异常