DeathGhost

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

这篇文章发布于2018年12月04日 22:09 星期二。 阅读 136 次 ,由 DeathGhost 编辑,归类于javascript »

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

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

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

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

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

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

Battery Status API
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。

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

DeathGhost

孙志锋

志于道,据于德,依于仁,游于艺。

deathghost@deathghost.cn


web前端设计与开发 - 与其说它是一门职业技术,不如将其视为一门艺术!


本站当前16 篇文章归于4个目录

阿里云ECS

🙏 点击,就是一种鼓励,谢谢你的到访!🙏

💕与君共勉💕