H5有很多不错的api，比如有关电池的api就是其中一个，它能实时反映设备当前电量。记得今年锤子手机发布会上，当时老罗说电池的工业技术完全没有跟上智能手机的发展，越来越大的屏幕，越来越丰富的手机应用，这些都是极其费电的。尽管现在的智能手机在电池电量显示或提示功能方面都做得不错了，但如果单从我们web技术来说，或许也能做点什么，其实可以把H5 battery当做在网页中显示设备电量的标志，我们可以根据H5 battery返回的不同状态对用户的行为作出提示，比如电量不足时，切换成省电的网页模式。

说点题外话，H5有非常多的api，可能你无法记得每个api的详细用法，但你至少做到心中有数，知道w3c有这么一个知识点和应用。或许你曾经在某处看到类似的文章，但过了一年半载后，这些技术就随时间而去了，待你需要用时，你可能又要去网上查找资料，熟悉其相关用法。因此把它们记录在博客或者技术文档里总能让自己有种归属感。总之，好记性不如烂笔头吧。

相关用法

由于存在浏览器支持的差异，因此在使用前必须做跨浏览器处理：

var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery || navigator.msBattery;

if (battery) {
　　do something …// 支持H5 battery
} else {
　　alert("您的浏览器不支持H5 battery !")
}

H5 battery的属性，详见表格：

属性 描述 返回值
level 表示电池电量当前的电量 返回值为数值(小数点)
charging 表示电池是否在充电 返回值为布尔值，true表示正在充电，false则是未充电
chargingTime 电池充满需要的时间 返回值为数值。未充电情况下Infinity，而充电情况下也为Infinity
dischargingTime 电池当前电量可使用时间 返回值为数值。充电情况下为Infinity，而未充电则返回具体的时间值，单位是秒

H5 battery的事件，详见表格：

事件 描述
levelchange 电池电量改变时触发
chargingchange 充电状态改变时触发
chargingtimechange 充电满时触发
dischargingtimechange 电池使用完时触发

我在文章的最后给出了演示demo，截图如下：

兼容性

之前chrome一直不支持，前段时间chrome升级到38，虽然查阅Caniuse网站显示38的版本支持，但经过测试仍然是不支持，可能是网站数据有误，同为webkit内核的safari也不支持。而firefox虽然很早就部分支持，但是却一直处在部分支持。

具体的请移步这里：http://caniuse.com/#search=battery

另外由于这个api主要作用还是在手机终端，经本人手机的UC浏览器测试，数据呈现好像也有误。

如果你想查看准确的api效果演示，可在firefox打开此demo：H5 battery，你也可以断开和接通电源进行对比。