# web端获取电池电量及充电状态信息

> web接口Battery Status API获取电池状态及充电状态，我们可以将其应用在移动web端，根据电池状态信息或充电状态对其做进一步的用户交互操作。

Author: DeathGhost
Published: 2018-12-04 22:09:04
Category: javascript
Canonical: https://www.deathghost.cn/article/javascript/41
Keywords: Battery Status, Battery, navigator.getBattery, 电池状态, 充电状态, 电池状态事件, web接口, JavaScript获取电池信息

Battery Status API 向 window.navigator 扩展了一个 navigator.getBattery 方法，其返回了一个battery promise, 完成后传递一个 BatteryManager 对象，并提供了一些新的可以操作电池状态的事件。

我们可以借助这个web接口在适当情况下将其应用，例如：“在设备电量低的时候调整应用的资源使用状态，或者在电池用尽前保存应用中的修改以防数据丢失，提醒用户。”

通过navigator.getBattery方法，我们可以实时监听放电状态和电池等级和剩余的事件（不论是否正在充电还是在使用电池）。

navigator.getBattery 方法返回一个promise对象，该promise将提供一个BatteryManager接口，可以从Battery Status API 查询到相关信息。

如图所示，我们切换电源连接状态看效果：

![Battery Status API](https://www.deathghost.cn/public/upload/article/2018/12/1543931619371.gif)

Battery Status API

属性

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

BatteryManager.onchargingchange
// chargingchange事件处理器；电池充电状态更新时被调用。
BatteryManager.onchargingtimechange
// chargingtimechange事件处理器；电池充电时间更新时被调用。
BatteryManager.ondischargingtimechange
// dischargingtimechange事件处理器；电池断开充电时间更新时被调用。
BatteryManager.onlevelchange
// levelchange事件处理器；电池电量更新时被调用
下面是上述图例的html代码。

*{margin:0;padding:0;color:white;font-size:2vw;overflow:hidden;}
.wrap{position:relative;width:100vw;height:100vh;background:blue;}
.info{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  text-align:center;
}
.info p{margin-top:2vh;}
.info p small{font-size:1.5vw;color:#f5f5f5;}
...BODY

<section class="wrap">
  <div class="info">
    <h1>当前电量<span id="BatterylevelText"></span></h1>
    <progress id="Batterylevel" value="0" max="100"></progress>
    <p>当前电源状态：<span id="Batterycharging">未知</span></p>
    <p>
      <small>chargingTime: <i id="Batterychargingtime"></i></small>
    </p>
    <p>
      <small>dischargingTime: <i id="Batterydischargingtime"></i></small>
    </p>
  </div>
</section>

.../BODY
navigator.getBattery().then(function(battery) {
    document.querySelector('#Batterylevel').value = battery.level * 100;
    document.querySelector('#BatterylevelText').textContent = (battery.level * 100)  '%';
    document.querySelector('#Batterycharging').textContent = battery.charging ? '电源已连接' : '电源已断开';
    document.querySelector('#Batterychargingtime').textContent = battery.chargingTime   " seconds"
    document.querySelector('#Batterydischargingtime').textContent = battery.dischargingTime   " seconds"
    // chargingchange事件处理器；电池充电状态更新时被调用。
    battery.addEventListener('chargingchange', function() {
      document.querySelector('#Batterycharging').textContent = battery.charging ? '电源已连接' : '电源已断开';
    });
    // levelchange事件处理器；电池电量更新时被调用。
    battery.addEventListener('levelchange', function() {
      document.querySelector('#Batterylevel').textContent = battery.level * 100;
      document.querySelector('#BatterylevelText').textContent = (battery.level * 100)  '%';
    });
    // chargingtimechange事件处理器；电池充电时间更新时被调用。
    battery.addEventListener('chargingtimechange', function() {
      document.querySelector('#Batterychargingtime').textContent = battery.chargingTime   " seconds"
    });
    // dischargingtimechange事件处理器；电池断开充电时间更新时被调用。
    battery.addEventListener('dischargingtimechange', function() {
      document.querySelector('#Batterydischargingtime').textContent = battery.dischargingTime   " seconds"
    });
  });
测试后chargingTime与dischargingTime值是Infinity?，手机端dischargingTime 断开电源则为0。

具体大家可以测试运行看看，移动设备，笔记本，手机，平板上面的，台式电脑没法测试。

## Related

- Previous: [借助ES6中export和import通过execCommand方法实现一个可插入emoji表情的简易消息窗口](https://www.deathghost.cn/article/javascript/37)
- Next: [JS原生的深拷贝API structuredClone()](https://www.deathghost.cn/article/javascript/120)