js获取系统电池电量信息

昨天看到coco大佬写的css文章,非常的有趣, 多点了几个, 看到评论区回复, 使用电池状态API获取真实的电量, 很好奇, 就在MDN中查看了这个API, 非常有趣, 和大家分享一下

https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/getBattery
getBattery方法提供了系统的电池信息, 我们调用该方法, 返回了包含电池对象的promise对象, 该返回信息中, 提供了一些属性和事件, 让我们获取或监控电池的状态

我们来实现一下吧

看一下返回结果

这些返回结果都是什么意思呢

charging: 表示当前是否正在充电
chargingTime: 表示电池距离充电完成还有多少秒
dischargingTime: 表示点击距离完全耗电, 系统挂起还有多少秒
level: 表示当前电池电量的百分比
这样大家似乎就更了解这个API了

我们写一个小的案例, 实时更新系统电量信息

现在我们先简单获取一下, 实时更新, 需要我们点用实例方法了

该电池状态API也提供了几个实例方法, 我们大致看一下

都是以上属性值发生变化了, 进行更新

我们先加一个电量更新的change监听

res.onlevelchange = (o) => {
console.log(o);
level.value = o.target.level;
};
我们电池电量从81变成82, 会不会触发

我们可以看到触发了

其余的方法也是一样, 触发之后更新其值即可

今天我们就讲解到这里

祝大家国庆快乐

我们下期见

她的码农
酷爱前端开发，酷爱写作，向全栈工程师奋进！
317篇原创内容
公众号
Vue3
30
JavaScript
34
Vue3 · 目录
上一篇
分享一个好用的Vue3下拉框组件