使用JavaScript获取电池状态的方法


Posted in Javascript onMay 03, 2014

从Mozilla Aurora 11起,火狐浏览器里实现了一些新功能,其中一个就是对电池状态接口的基本实现。这个很简单的接口能提供你关于电池当前电量,是否在充电等信息,以及一些电池状态变化事件。让我们来看看效果!

电池对象是存放在window.navigator.battery里,但因为这是火狐浏览器首次实现并提供这个接口,并未普及,你需要使用window.navigator.mozBattery这种写法。这个mozBattery对象有下列属性:

1.charging: 表示当前电池设备是否在充电。如果电池没有充电,这个值为false。如果为true,表明电池正在充电。当前的API实现里不能得到是否充满的信息,也无法判断当前设备是否有电池。
2.chargingTime: 是指距离电池充满还需要多久。
3.dischargingTime: 电池已使用时间。
4.level: 表示电量等级,从0到1.0。当这个值为0时,表示电量耗尽,系统即将关机。如果为1.0,则表示电池满电。
针对这些状态,接口里提供了各自相应的事件,包括onchargingchange, onchargingtimechange, ondischargingtimechange, 和 onlevelchange。基本的用法很简单:

// 获取电池对象!
var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery;
// 显示一些有用属性值
console.warn("电池充电状态: ", battery.charging); // true
console.warn("电量水平: ", battery.level); // 0.58
console.warn("电池使用时间: ", battery.dischargingTime);
// 设置一些事件监听器
battery.addEventListener("chargingchange", function(e) {
 console.warn("电池充电状态变化: ", battery.charging);
}, false);
battery.addEventListener("chargingtimechange", function(e) {
 console.warn("电池充电时间变化: ", battery.chargingTime);
}, false);
battery.addEventListener("dischargingtimechange", function(e) {
 console.warn("电池使用时间变化: ", battery.dischargingTime);
}, false);
battery.addEventListener("levelchange", function(e) {
 console.warn("电量水平变化: ", battery.level);
}, false);

很简单,不是吗?这几个接口都非常的棒:简单,高效,实用!

为什么要使用这些电池编程接口?因为很多用浏览器封装的移动应用(非‘native')需要知道系统的当前状态。有些CPU对电量很敏感,在处理某些特殊任务前要设备有足够的电量,App应事先提醒用户电量不足,请充电。

Javascript 相关文章推荐
优秀js开源框架-jQuery使用手册(1)
Mar 10 Javascript
javascript设计模式之工厂模式示例讲解
Mar 04 Javascript
js中的caller和callee属性介绍和例子
Jun 07 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
Mar 03 Javascript
javascript读取文本节点方法小结
Dec 15 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
Dec 27 Javascript
理解javascript async的用法
Aug 22 Javascript
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
Aug 12 Javascript
记录一次完整的react hooks实践
Mar 11 Javascript
微信小程序保持session会话的方法
Mar 20 Javascript
原生js实现五子棋游戏
May 28 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
Nov 09 Javascript
JavaScript打印网页指定区域的例子
May 03 #Javascript
js检测输入内容全为空格的方法
May 03 #Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
May 03 #Javascript
离开当前页面前使用js判断条件提示是否要离开页面
May 02 #Javascript
js日期联动示例
May 02 #Javascript
jQuery实现的多选框多级联动插件
May 02 #Javascript
自己使用js/jquery写的一个定制对话框控件
May 02 #Javascript
You might like
动态网站web开发 PHP、ASP还是ASP.NET
2006/10/09 PHP
PHP文件操作之获取目录下文件与计算相对路径的方法
2016/01/08 PHP
PHP实现基于状态的责任链审批模式详解
2019/05/31 PHP
phpfpm的作用和用法
2019/10/10 PHP
有关PHP 中 config.m4 的探索
2020/08/26 PHP
javascript权威指南 学习笔记之null和undefined
2011/09/25 Javascript
[原创]推荐10款最热门jQuery UI框架
2014/08/19 Javascript
Javascript中call与apply的学习笔记
2014/09/22 Javascript
JS实现的自定义右键菜单实例二则
2015/09/01 Javascript
jQuery实现切换页面过渡动画效果
2015/10/29 Javascript
JavaScript中rem布局在react中的应用
2015/12/09 Javascript
jQuery基于ID调用指定iframe页面内的方法
2016/07/06 Javascript
AngularJS利用Controller完成URL跳转
2016/08/09 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
2016/08/19 Javascript
jQuery实现扑克正反面翻牌效果
2017/03/10 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
2017/03/14 Javascript
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
纯Python开发的nosql数据库CodernityDB介绍和使用实例
2014/10/23 Python
利用一个简单的例子窥探CPython内核的运行机制
2015/03/30 Python
用Python从零实现贝叶斯分类器的机器学习的教程
2015/03/31 Python
Python matplotlib通过plt.scatter画空心圆标记出特定的点方法
2018/12/13 Python
解析Python的缩进规则的使用
2019/01/16 Python
对python列表里的字典元素去重方法详解
2019/01/21 Python
对pandas处理json数据的方法详解
2019/02/08 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
使用python获取(宜宾市地震信息)地震信息
2019/06/20 Python
Python提取转移文件夹内所有.jpg文件并查看每一帧的方法
2019/06/27 Python
详解pycharm连接不上mysql数据库的解决办法
2020/01/10 Python
python em算法的实现
2020/10/03 Python
Backcountry旗下的户外商品闪购网站:steep&cheap
2016/09/22 全球购物
Surfdome西班牙:世界上最受欢迎的生活方式品牌
2019/02/13 全球购物
三星法国官方网站:Samsung法国
2019/10/31 全球购物
潘多拉珠宝美国官方网站:Pandora US
2020/06/18 全球购物
教育系毕业生中文求职信范文
2013/10/06 职场文书
CSS 还能这样玩?奇思妙想渐变的艺术
2021/04/27 HTML / CSS
SpringBoot整合RabbitMQ的5种模式实战
2021/08/02 Java/Android