产品说这个需求大前端实现一下

80 阅读1分钟

最近接到产品的一个需求:
根据电量来给用户对应的提示操作,心想这个还要前端实现吗?

u=1814389320,1147977074&fm=253&fmt=auto&app=138&f=JPEG.webp
各种百度,发现平时经常用的navigator方法就可以判断# 是否充电、剩余电量、剩余可用时间等等信息

qSwolDJ0Oxkwgy29nW3MdCHJ8wDGOoMB.png

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

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

navigator不仅可用来获取浏览器的各种信息, 甚至还可已监听电池电量(PC和移动端都可以). navigator里有一个方法getBattery(), 这个方法返回一个Promise对象, 通过.then的方式, 可以获取到电池信息

navigator.getBattery().then(function(battery) {   
  console.log(battery)
});

8.png

详细说明:
// charging: 是否在充电
// chargingTime: 充满电还需要的时间(秒)
// dischargingTime:  电池剩余可用时间(秒)
// level: 剩余电量,最大电量就是1
// onchargingchange:  充电状态改变时触发该监听函数
// onchargingtimechange:  充满还需时间改变时触发该监听函数
// ondischargingtimechange:  电池剩余可用时间改变时触发该监听函数
// onlevelchange:  电量改变时触发该监听函数

通过判断剩余电量,就可以给用户提示相应的信息就可以完成这个需求啦~~
大家没事还是要多刷一下mdn,里面还是有很多知识点
赋上地址