HTML5 想获取电池信息 显示 undefined

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

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

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

navigator.getBattery 方法返回一个promise对象，该promise将提供一个BatteryManager接口，可以从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事件处理器；电池电量更新时被调用

DEMO:

*{margin:0padding:0color:whitefont-size:2vwoverflow:hidden}.wrap{position:relativewidth:100vwheight:100vhbackground: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.5vwcolor:#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