使用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 相关文章推荐
firefox中用javascript实现鼠标位置的定位
Jun 17 Javascript
jquery获取iframe中的dom对象(两种方法)
Jul 02 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
Dec 02 Javascript
有关文件上传 非ajax提交 得到后台数据问题
Oct 12 Javascript
EasyUI学习之DataGird分页显示数据
Dec 29 Javascript
Avalonjs双向数据绑定与监听的实例代码
Jun 23 Javascript
js+html5实现半透明遮罩层弹框效果
Aug 24 Javascript
mpvue性能优化实战技巧(小结)
Apr 17 Javascript
vue组件间的参数传递实例详解
Apr 26 Javascript
js原生map实现的方法总结
Jan 19 Javascript
Vue实现图书管理案例
Jan 20 Vue.js
关于JavaScript回调函数的深入理解
Jun 27 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
PHP连接access数据库
2008/03/27 PHP
[原创]php使用strpos判断字符串中数字类型子字符串出错的解决方法
2017/04/01 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
Yii2框架实现登陆添加验证码功能示例
2018/07/12 PHP
php工具型代码之印章抠图
2018/07/18 PHP
PHP _construct()函数讲解
2019/02/03 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
javascript concat数组累加 示例
2009/09/03 Javascript
Javascript new关键字的玄机 以及其它
2010/08/25 Javascript
JQuery AJAX 中文乱码问题解决
2013/06/05 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
2014/01/13 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
2015/03/04 Javascript
JS获得图片alt信息的方法
2015/04/01 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
2016/05/23 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
2016/10/27 Javascript
Javascript 实现放大镜效果实例详解
2016/12/03 Javascript
node.js中cluster的使用教程
2017/06/09 Javascript
jQuery实现输入框的放大和缩小功能示例
2018/07/21 jQuery
vue v-for直接循环数字实例
2019/11/07 Javascript
在node环境下parse Smarty模板的使用示例代码
2019/11/15 Javascript
JavaScript逻辑运算符相关总结
2020/09/04 Javascript
js+audio实现音乐播放器
2020/09/13 Javascript
[44:58]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第二场
2018/04/06 DOTA
[01:00:11]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第一场 2月7日
2021/03/11 DOTA
Python机器学习库scikit-learn安装与基本使用教程
2018/06/25 Python
Python中的相关分析correlation analysis的实现
2019/08/29 Python
纯HTML+CSS3制作导航菜单(附源码)
2013/04/24 HTML / CSS
html5 svg 中元素点击事件添加方法
2013/01/16 HTML / CSS
Canvas图片分割效果的实现
2019/07/29 HTML / CSS
美国婚戒购物网站:Anjays Designs
2017/06/28 全球购物
艺术系应届生的自我评价
2013/10/19 职场文书
人事主管的岗位职责
2013/11/16 职场文书
心理健康教育心得体会
2013/12/29 职场文书
学生个人总结范文
2015/02/15 职场文书
Hive HQL支持2种查询语句风格
2022/06/25 数据库
jdbc中自带MySQL 连接池实践示例
2022/07/23 MySQL