使用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 相关文章推荐
Javascript客户端脚本的设计和应用
Aug 21 Javascript
摘自百度的图片轮换效果代码
Nov 19 Javascript
JS 拼图游戏 面向对象,注释完整。
Jun 18 Javascript
javascript innerText和innerHtml应用
Jan 28 Javascript
跨浏览器开发经验总结(四) 怎么写入剪贴板
May 13 Javascript
基于MooTools的很有创意的滚动条时钟动画
Nov 14 Javascript
lyhucSelect基于Jquery的Select数据联动插件
Mar 29 Javascript
jQuery仿京东商城楼梯式导航定位菜单
Jul 25 Javascript
Jquery组件easyUi实现表单验证示例
Aug 23 Javascript
微信小程序模板和模块化用法实例分析
Nov 28 Javascript
JS使用栈判断给定字符串是否是回文算法示例
Mar 04 Javascript
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
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
ThinkPHP处理Ajax返回的方法
2014/11/22 PHP
php中mail函数发送邮件失败的解决方法
2014/12/24 PHP
php解析http获取的json字符串变量总是空白null
2015/03/02 PHP
PHP微信红包生成代码分享
2016/10/06 PHP
利用404错误页面实现UrlRewrite的实现代码
2008/08/20 Javascript
用Javascript数组处理多个字符串的连接问题
2009/08/20 Javascript
新发现一个骗链接的方法(js读取cookies)
2012/01/11 Javascript
javascript学习笔记之10个原生技巧
2014/05/21 Javascript
JavaScript闭包函数访问外部变量的方法
2014/08/27 Javascript
jQuery使用之标记元素属性用法实例
2015/01/19 Javascript
JavaScript面向对象之私有静态变量实例分析
2016/01/14 Javascript
AngularJS基础 ng-mousemove 指令简单示例
2016/08/02 Javascript
angularjs+bootstrap菜单的使用示例代码
2017/03/07 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
2017/11/20 Javascript
Javascript 之封装(Package)
2018/09/14 Javascript
vue项目中axios请求网络接口封装的示例代码
2018/12/18 Javascript
Vue实现一个图片懒加载插件
2019/03/11 Javascript
Python+Django在windows下的开发环境配置图解
2009/11/11 Python
Python实例分享:快速查找出被挂马的文件
2014/06/08 Python
Eclipse和PyDev搭建完美Python开发环境教程(Windows篇)
2016/11/16 Python
Python算法应用实战之队列详解
2017/02/04 Python
pandas pivot_table() 按日期分多列数据的方法
2018/11/16 Python
Python Django Vue 项目创建过程详解
2019/07/29 Python
详解Python图像处理库Pillow常用使用方法
2019/09/02 Python
解决Pycharm中恢复被exclude的项目问题(pycharm source root)
2020/02/14 Python
基于Python下载网络图片方法汇总代码实例
2020/06/24 Python
python+playwright微软自动化工具的使用
2021/02/02 Python
美国设计师精美珠宝购物网:Netaya
2016/08/28 全球购物
西铁城美国官方网站:Citizen Watch美国
2019/11/08 全球购物
印度尼西亚最完整和最大的在线药房网站:Farmaku.com
2019/11/23 全球购物
12岁生日演讲稿
2014/05/14 职场文书
论群众路线学习笔记
2014/11/06 职场文书
教师岗位职责范本
2015/04/02 职场文书
防汛通知
2015/04/25 职场文书
股权投资协议书
2016/03/23 职场文书
mysql中between的边界,范围说明
2021/06/08 MySQL