网页制作

HTML5的一个显示电池状态的API简介
网页制作 2024/12/30 佚名
3 2

移动设备的份额在网络流量中在大量增长，其所贡献的网络流量非常庞大，以至于为了移动设备，我们单独创建了一些API和设计理念。一个非常典型的例子是 W3C电池状态API，它允许一个应用程序获知设备的电池状态信息。这篇文章探索了这个新的API，为你展示了如何把它整合进你现有的应用程序。
 检测设备是否支持

目前电池API依旧没有得到主流支持。因此，在使用这个API前需要确认当前设备是否支持此API。下面展示的函数返回一个布恩值(True/False)，指示当前浏览器是否支持电池状态API。

该函数首先检测了 navigator.battery 对象是否存在。如果不存在，继续检测 Mozilla 专用的

navigator.mozBattery是否存在。我曾经见过有些代码还检测了 webkitBattery对象，但是我无法证实其在Chrome中是否存在。

参考文档：https://developer.mozilla.org/en-US/docs/DOM/window.navigator.battery
 

XML/HTML Code复制内容到剪贴板
  1. functionisBatteryStatusSupported() {   
  2.   return!!(navigator.battery || navigator.mozBattery);   
  3. }  

检查电池

如果电池对象存在，它会包含下列四个只读属性。

  •     charging —— （布恩值）指示系统的电池当前是否正在充电。

    如果系统不存在电池，或无法确定电池是否在充电，返回值是 True

  •     chargingTime —— （数值）电池完全充满电量所需的时间（单位：秒）

    当电池完全被充满电时，或者系统不存在电池时，这个值为0。

    如果系统不在充电，或者无法确定完全充满电所需时间，这个值为∞（无穷大）。

  •     dischargingTime —— 和chargingTime相似，（数值）到电池完全放电直到系统休眠剩余的时间（单位：秒）

    如果放电时间无法确定，或 系统没有电池 或 系统正在充电，这个值为 ∞ （无穷大）

  •     level —— (数值) 设备当前电量等级。取值在(0 ~ 1.0)区间，与剩余电量百分比对应。

    1.0表示电池完全充满电，或者不存在电池，或者数值无法确定。


检测电池事件

上述所有属性都与一个电池事件绑定。这些事件用来指示电池状态的变化。比如，插入电源会使charging属性从false变为true。全部四种电池事件如下所列：

  •     chargingchange —— 这个类型的事件会在charging属性改变时触发。这个事件可以被 onchargingchange()事件处理器捕获和处理。
        chargingtimechange —— 这个类型的事件会在chargingtime属性改变时触发。这个事件可以被 onchargingtimechange()事件处理器捕获和处理。
        dischargingtimechange —— 这个类型的事件会在dischargingTime属性改变时触发。这个事件可以被 ondischargingtimechange()事件处理器捕获和处理。
        levelchange —— 这个类型的事件会在level属性改变时触发。这个事件可以被 onlevelchange()事件处理器捕获和处理。

 
示例页面

下面的代码展示了如何使用 电池状态API 的属性和事件。

示例页面显示了API的各个属性值，并且在事件触发时更新它们的值。

点击此处访问在线示例。
 

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <htmllanghtmllang="en">  
  3. <head>  
  4.   <title>The Battery Status API - Example</title>  
  5.   <metacharsetmetacharset="UTF-8"/>  
  6.   <script>  
  7.     window.addEventListener("load", function() {   
  8.       var battery = navigator.battery || navigator.mozBattery;   
  9.       function displayBatteryStats() {   
  10.         document.getElementById("charging").textContent = (battery.charging) ? "charging" : "not charging";   
  11.         document.getElementById("chargingtime").textContent = battery.chargingTime;   
  12.         document.getElementById("dischargingtime").textContent = battery.dischargingTime;   
  13.         document.getElementById("level").textContent = battery.level * 100;   
  14.       }   
  15.       if (battery) {   
  16.         displayBatteryStats();   
  17.         battery.addEventListener("chargingchange", displayBatteryStats, false);   
  18.         battery.addEventListener("chargingtimechange", displayBatteryStats, false);   
  19.         battery.addEventListener("dischargingtimechange", displayBatteryStats, false);   
  20.         battery.addEventListener("levelchange", displayBatteryStats, false);   
  21.       } else {   
  22.         document.getElementById("stats").textContent = "Sorry, your browser does not support the Battery Status API";   
  23.       }   
  24.     }, false);   
  25.   </script>  
  26. </head>  
  27. <body>  
  28.   <dividdivid="stats">  
  29.     Your battery is currently <spanidspanid="charging"></span>.<br/>  
  30.     Your battery will be charged in <spanidspanid="chargingtime"></span> seconds.<br/>  
  31.     Your battery will be discharged in <spanidspanid="dischargingtime"></span> seconds.<br/>  
  32.     Your battery level is <spanidspanid="level"></span>%.   
  33.   </div>  
  34. </body>  
  35. </html>  

结论

本文为Battery Status API给出了一个完整的总结和展示，尽管其仍未得到主流支持，但是这只是时间问题。考虑到移动互联网的激增，开发者应该尽快将电池信息纳入设计范畴内。

标签：
HTML5,API
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
无争山庄资源网 Copyright www.whwtcm.com

评论“HTML5的一个显示电池状态的API简介”

暂无“HTML5的一个显示电池状态的API简介”评论...
www.whwtcm.com 无争山庄资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
无争山庄资源网 Copyright www.whwtcm.com