使用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 相关文章推荐
js禁止小键盘输入数字功能代码
Aug 01 Javascript
Javascript 垃圾收集机制介绍理解
May 14 Javascript
jQuery源码解读之removeAttr()方法分析
Feb 20 Javascript
Javascript实现div的toggle效果实例分析
Jun 09 Javascript
jQuery 遍历函数详解
Jul 05 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
Aug 09 Javascript
JS获取字符对应的ASCII码实例
Sep 10 Javascript
vue自定义一个v-model的实现代码
Jun 21 Javascript
推荐15个最好用的JavaScript代码压缩工具
Feb 13 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
Apr 08 Javascript
layui表格内放置图片,并点击放大的实例
Sep 10 Javascript
JavaScript 装逼指南(js另类写法)
May 10 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
咖啡店都有些什么常规豆子呢?有什么风味在里面
2021/03/04 咖啡文化
php使用pdo连接mssql server数据库实例
2014/12/25 PHP
PHP编程获取图片的主色调的方法【基于Imagick扩展】
2017/08/02 PHP
获取dom元素那些讨厌的位置封装代码
2010/06/23 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
2013/09/03 Javascript
javascript动态创建及删除元素的方法
2014/12/22 Javascript
jQuery中的pushStack实现原理和应用实例
2015/02/03 Javascript
JS根据生日算年龄的方法
2015/05/05 Javascript
nodejs爬虫抓取数据之编码问题
2015/07/03 NodeJs
js实现文字选中分享功能
2017/01/25 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
2017/02/03 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
2017/09/26 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
2019/10/30 Javascript
vue随机验证码组件的封装实现
2020/02/19 Javascript
jQuery实现移动端笔触canvas电子签名
2020/05/21 jQuery
Python实现的简单万年历例子分享
2014/04/25 Python
简单介绍Python的Django框架加载模版的方式
2015/07/20 Python
Python学习小技巧之列表项的排序
2017/05/20 Python
Python使用gRPC传输协议教程
2018/10/16 Python
Python中时间datetime的处理与转换用法总结
2019/02/18 Python
快速解决vue.js 模板和jinja 模板冲突的问题
2019/07/26 Python
python的移位操作实现详解
2019/08/21 Python
使用python将最新的测试报告以附件的形式发到指定邮箱
2019/09/20 Python
linux centos 7.x 安装 python3.x 替换 python2.x的过程解析
2020/12/14 Python
5个你不知道的HTML5的接口介绍
2013/08/07 HTML / CSS
印度婴儿用品在线商店:Firstcry.com
2016/12/05 全球购物
西班牙在线宠物商店:zooplus.es
2017/02/24 全球购物
欧铁通票官方在线销售网站:Eurail.com
2017/10/14 全球购物
MAC彩妆澳洲官网:M·A·C AU
2021/01/17 全球购物
化学教师教学反思
2014/01/17 职场文书
百年校庆节目主持词
2014/03/27 职场文书
文明村创建实施方案
2014/03/27 职场文书
幼儿园大班评语大全
2014/04/17 职场文书
大班上学期幼儿评语
2014/04/30 职场文书
员工生日活动方案
2014/08/24 职场文书
Typescript类型系统FLOW静态检查基本规范
2022/05/25 Javascript