HTML5 中的电池状态 API 是什么？

HTML5 中的电池状态 API 可以让网页访问客户端的设备电池状态信息，例如当前电池剩余电量、充电状态等。

API 接口

Navigator.getBattery()

这个接口返回一个 Promise 对象，用于获取电池状态信息。下面是一个示例：

navigator.getBattery().then(function(battery) {
  console.log("当前电池剩余电量：" + battery.level * 100 + "%");

  battery.addEventListener("levelchange", function() {
    console.log("电池电量变化了：" + battery.level * 100 + "%");
  });

  battery.addEventListener("chargingchange", function() {
    console.log("电池充电状态：" + (battery.charging ? "充电中" : "未充电"));
  });

  battery.addEventListener("dischargingtimechange", function() {
    console.log("离线状态下电池可用时间：" + battery.dischargingTime / 60 + "分钟");
  });

  battery.addEventListener("chargingtimechange", function() {
    console.log("在线状态下电池充满时间：" + battery.chargingTime / 60 + "分钟");
  });
});

Battery Status API 接口

这个接口提供了一系列事件，用于监听电池状态的变化。下面是一些示例：

// 电池电量变化了
navigator.getBattery().then(function(battery) {
  battery.addEventListener("levelchange", function() {
    console.log("电池电量变化了：" + battery.level * 100 + "%");
  });
});

// 电池充电状态变化了
navigator.getBattery().then(function(battery) {
  battery.addEventListener("chargingchange", function() {
    console.log("电池充电状态：" + (battery.charging ? "充电中" : "未充电"));
  });
});

// 离线状态下电池可用时间变化了
navigator.getBattery().then(function(battery) {
  battery.addEventListener("dischargingtimechange", function() {
    console.log("离线状态下电池可用时间：" + battery.dischargingTime / 60 + "分钟");
  });
});

// 在线状态下电池充满时间变化了
navigator.getBattery().then(function(battery) {
  battery.addEventListener("chargingtimechange", function() {
    console.log("在线状态下电池充满时间：" + battery.chargingTime / 60 + "分钟");
  });
});

浏览器支持情况

目前，大部分主流浏览器都支持电池状态 API，但是不同浏览器的实现可能会有所不同，具体可以参见这里。