使用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 相关文章推荐
QQ邮箱的一个文本编辑器代码
Mar 14 Javascript
HTML5附件拖拽上传drop & google.gears实现代码
Apr 28 Javascript
javascript实现playfair和hill密码算法
Dec 07 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
Feb 26 Javascript
javascript 广告移动特效的实现代码
Jun 25 Javascript
JavaScript中的ajax功能的概念和示例详解
Oct 17 Javascript
老生常谈jquery id选择器和class选择器的区别
Feb 12 Javascript
Angular中使用$watch监听object属性值的变化(详解)
Apr 24 Javascript
Node.js 实现简单的接口服务器的实例代码
May 23 Javascript
angular2 ng2 @input和@output理解及示例
Oct 10 Javascript
浅谈Koa服务限流方法实践
Oct 23 Javascript
js实现纯前端压缩图片
Nov 16 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 上传文件的方法(类)
2009/07/30 PHP
控制PHP的输出:缓存并压缩动态页面
2013/06/11 PHP
php while循环得到循环次数
2013/10/26 PHP
ThinkPHP3.2.2的插件控制器功能简述
2014/07/09 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
2011/10/23 Javascript
JavaScript中的noscript元素属性位置及作用介绍
2013/04/11 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
2013/06/04 Javascript
jQuery插件pagination实现分页特效
2015/04/12 Javascript
jQuery Real Person验证码插件防止表单自动提交
2015/11/06 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
2015/11/24 Javascript
微信小程序 Video API实例详解
2016/10/02 Javascript
详解Angular的双向数据绑定(MV-VM)
2016/12/26 Javascript
js实现适配不同的屏幕大小
2017/04/10 Javascript
图片加载完成再执行事件的实例
2017/11/16 Javascript
JS基于递归实现网页版计算器的方法分析
2017/12/20 Javascript
浅谈vue中.vue文件解析流程
2018/04/24 Javascript
jQuery实现的页面详情展开收起功能示例
2018/06/11 jQuery
layui 优化button按钮和弹出框的方法
2018/08/15 Javascript
详解如何webpack使用DllPlugin
2018/09/30 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
2019/03/28 jQuery
使用vue实现各类弹出框组件
2019/07/03 Javascript
使用zrender.js绘制体温单效果
2019/10/31 Javascript
[05:26]TI10典藏宝瓶套装外观展示
2020/07/03 DOTA
通过python顺序修改文件名字的方法
2018/07/11 Python
Pycharm中如何关掉python console
2020/10/27 Python
全方位了解CSS3的Regions扩展
2015/08/07 HTML / CSS
非凡女性奢华谦虚风格:The Modist
2017/10/28 全球购物
Feelunique中文官网:欧洲最大化妆品零售电商
2020/07/10 全球购物
《蓝色的树叶》教学反思
2014/02/24 职场文书
临时租车协议范本
2014/09/23 职场文书
群众路线教育实践活动民主生活会个人检查对照思想汇报
2014/10/04 职场文书
《假如》教学反思
2016/02/17 职场文书
雄兵连:第三季先行图公开,天使恶魔联合,银河之力的新力量
2021/06/11 国漫
SQL实现LeetCode(197.上升温度)
2021/08/07 MySQL
Python实现批量自动整理文件
2022/03/16 Python