• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    HTML5的一个显示电池状态的API简介

    移动设备的份额在网络流量中在大量增长,其所贡献的网络流量非常庞大,以至于为了移动设备,我们单独创建了一些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. }  

    检查电池

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

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

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

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

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

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


    检测电池事件

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

     
    示例页面

    下面的代码展示了如何使用 电池状态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中使用JSON格式提交表单
    下一篇:检测浏览器对HTML5和CSS3支持度的方法
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    HTML5的一个显示电池状态的API简介 HTML5,的,一个,显示,电池,