使用 BatteryManager 来查看电池状态

大家都知道HTML5中新增了不少有意思的API，比如消息通知(Notification)、定位(Geolocation)、音乐、视频。。。在去年，我利用一些API写了一个简单的音乐可视化的小玩意，演示地址：http://blog.codeartisan.name/music-visualizer/。今天我们来看看BatteryManager这个API，看看它能干些什么。

根据 mozilla 社区提供的文档，我们可以看到关于 BatteryManager 的简介：BatteryManager 接口提供方法获取系统电量。navigator.getBattery 方法返回一个promise对象，该promise将提供一个BatteryManager接口，你可以从 Battery Status API 查询到相关信息。关看不练假把式，干技术的，怎么能只看不动手呢？来个例子玩玩吧！

navigator.getBattery().then((response) => {
  console.log(response);

  response.onchargingchange = function (event) {
    console.log(response.charging);
  };

  response.ondischargingchange = function (event) {
    console.log(response.dischargingTime);
  };

  response.ondischargingtimechange = function (event) {
    console.log(response.dischargingTime);
  };

  response.onlevelchange = function () {
    console.log(response.level);
  }
});

你可以拷贝以上的代码片段，粘贴到 console 面板中执行，看看都有什么信息返回。我这里的返回信息见下图：

  

其中 charging 是指当前电池是否正在充电，chargingTime 代表距离充满电还需要多少时间（注意：单位是秒），如果为0则充电完毕。dischargingTime 代表距离电池耗尽且挂起需要多少秒，如果电池是充电状态，返回的则是Infinity，level 代表电量的放大等级，这个值在 0.0 到 1.0 之间，剩下几个为事件回调函数。

属性：

• BatteryManager.charging（只读） 一个布尔值，说明当前电池是否正在充电。
• BatteryManager.chargingTime （只读） 一个数字，代表距离充电完毕还需多少秒，如果为0则充电完毕。
• BatteryManager.dischargingTime （只读） 一个数字，代表距离电池耗电至空且挂起需要多少秒。
• BatteryManager.level （只读） 一个数字，代表电量的放大等级，这个值在 0.0 至 1.0 之间。

事件：

• BatteryManager.onchargingchange 当充电池充电时且电量发生改变时会被触发。
• BatteryManager.onchargingtimechange 当充电池充电时且所需充电时间发生改变时会被触发。
• BatteryManager.ondischargingtimechange 当电池放电（即非充电状态）且距离电池耗尽时间发生改变时会被触发。
• BatteryManager.onlevelchange 当电量放大等级发生改变时会被触发。

兼容：

 

扩展阅读：

1、https://developer.mozilla.org/zh-CN/docs/Web/API/BatteryManager
2、https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/getBattery