使用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 相关文章推荐
用dtree实现树形菜单 dtree使用说明
Oct 17 Javascript
[原创]推荐10款最热门jQuery UI框架
Aug 19 Javascript
jquery仿百度经验滑动切换浏览效果
Apr 14 Javascript
浅谈JavaScript变量的自动转换和语句
Jun 12 Javascript
JS原型对象的创建方法详解
Jun 16 Javascript
功能强大的Bootstrap组件(结合js)
Aug 03 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
Apr 12 Javascript
微信小程序中做用户登录与登录态维护的实现详解
May 17 Javascript
基于JavaScript实现一个简单的Vue
Sep 26 Javascript
iview实现select tree树形下拉框的示例代码
Dec 21 Javascript
layui实现checkbox的目录树tree的例子
Sep 12 Javascript
ES11屡试不爽的新特性,你用上了几个
Oct 21 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过滤★等特殊符号的正则
2014/01/27 PHP
PHP 以POST方式提交XML、获取XML,解析XML详解及实例
2016/10/26 PHP
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
2010/06/28 Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
2012/01/13 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
2013/08/13 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
2014/06/11 Javascript
使用jQuery实现验证上传图片的格式与大小
2014/12/03 Javascript
封装好的js判断操作系统与浏览器代码分享
2015/01/09 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
2016/12/16 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
2017/01/09 Javascript
JS 实现 ajax 异步浏览器兼容问题
2017/01/21 Javascript
Vue中使用vux的配置详解
2017/05/05 Javascript
vue项目tween方法实现返回顶部的示例代码
2018/03/02 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
2018/06/19 Javascript
javascript的惯性运动实现代码实例
2019/09/07 Javascript
ES6学习笔记之let与const用法实例分析
2020/01/22 Javascript
vue实现户籍管理系统
2020/05/29 Javascript
[02:24]DOTA2痛苦女王 英雄基础教程
2013/11/26 DOTA
[02:30]联想杯DOTA2完美世界全国高校联赛—北京站现场
2015/11/16 DOTA
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python爬虫实现抓取京东店铺信息及下载图片功能示例
2018/08/07 Python
python 使用re.search()筛选后 选取部分结果的方法
2018/11/28 Python
对python中字典keys,values,items的使用详解
2019/02/03 Python
Python之lambda匿名函数及map和filter的用法
2019/03/05 Python
使用Python进行体育竞技分析(预测球队成绩)
2019/05/16 Python
python如何实现视频转代码视频
2019/06/17 Python
Django1.11配合uni-app发起微信支付的实现
2019/10/12 Python
Python中Flask-RESTful编写API接口(小白入门)
2019/12/11 Python
Python之关于类变量的两种赋值区别详解
2020/03/12 Python
利用Python实现Json序列化库的方法步骤
2020/09/09 Python
canvas实现图片镜像翻转的2种方式
2020/07/22 HTML / CSS
担保书格式及范文
2014/04/01 职场文书
信用卡工作证明模板
2014/09/14 职场文书
迎新生晚会主持词
2015/06/30 职场文书
宣传部部长竞选稿
2015/11/21 职场文书
《妈妈别哭,有我在》读后感3篇
2020/01/13 职场文书