使用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 相关文章推荐
基于jquery 的一个progressbar widge
Oct 29 Javascript
js实现遮罩层弹出框的方法
Jan 15 Javascript
AngularJS教程之简单应用程序示例
Aug 16 Javascript
JS封装的选项卡TAB切换效果示例
Sep 20 Javascript
js判断iframe中元素是否存在的实现代码
Dec 24 Javascript
javaScript日期工具类DateUtils详解
Dec 08 Javascript
JS代码实现电脑配置检测功能
Mar 21 Javascript
Vue.js实现的表格增加删除demo示例
May 22 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
Aug 07 Javascript
React通过redux-persist持久化数据存储的方法示例
Feb 14 Javascript
vue实现PC端录音功能的实例代码
Jun 05 Javascript
Vue3.0中的monorepo管理模式的实现
Oct 14 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
php5编程中的异常处理详细方法介绍
2008/07/29 PHP
PHP IPV6正则表达式验证代码
2010/02/16 PHP
php中修改浏览器的User-Agent来伪装你的浏览器和操作系统
2011/07/29 PHP
php和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
php指定函数参数默认值示例代码
2013/12/04 PHP
ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码
2014/06/23 PHP
ThinkPHP模板范围判断输出In标签与Range标签用法详解
2014/06/30 PHP
php操作xml入门之cdata区段
2015/01/23 PHP
PHP自定义递归函数实现数组转JSON功能【支持GBK编码】
2018/07/17 PHP
JavaScript中的Screen屏幕对象
2008/01/16 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
2011/09/17 Javascript
js调试系列 断点与动态调试[基础篇]
2014/06/18 Javascript
node.js中watch机制详解
2014/11/17 Javascript
js中javascript:void(0) 真正含义
2020/11/05 Javascript
JavaScript如何禁止Backspace键
2015/12/02 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
2016/05/27 Javascript
JavaScript中利用构造器函数模拟类的方法
2017/02/16 Javascript
微信小程序 支付功能(前端)的实现
2017/05/24 Javascript
利用JS hash制作单页Web应用的方法详解
2017/10/10 Javascript
parabola.js抛物线与加入购物车效果的示例代码
2017/10/25 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
2018/02/21 Javascript
vue router+vuex实现首页登录验证判断逻辑
2018/05/17 Javascript
基于vue和react的spa进行按需加载的实现方法
2018/09/29 Javascript
Next.js实现react服务器端渲染的方法示例
2019/01/06 Javascript
Python爬虫框架Scrapy安装使用步骤
2014/04/01 Python
使用Python从有道词典网页获取单词翻译
2016/07/03 Python
Python3 replace()函数使用方法
2018/03/19 Python
Pycharm设置界面全黑的方法
2018/05/23 Python
python+selenium打印当前页面的titl和url方法
2018/06/22 Python
使用TFRecord存取多个数据案例
2020/02/17 Python
python excel多行合并的方法
2020/12/09 Python
高职教师岗位职责
2013/12/24 职场文书
实习生求职自荐信
2014/02/07 职场文书
珍惜资源保护环境的建议书
2014/05/14 职场文书
观看《杨善洲》宣传教育片心得体会
2016/01/23 职场文书
《比的意义》教学反思
2016/02/18 职场文书