• 售前

  • 售后

热门帖子
入门百科

HTML5的一个表现电池状态的API简介

[复制链接]
刘和谐1 显示全部楼层 发表于 2021-10-26 12:41:43 |阅读模式 打印 上一主题 下一主题
移动设备的份额在网络流量中在大量增长,其所贡献的网络流量非常巨大,以至于为了移动设备,我们单独创建了一些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复制内容到剪贴板
       
  • functionisBatteryStatusSupported() {      
  •   return!!(navigator.battery || navigator.mozBattery);      
  • }  
查抄电池
假如电池对象存在,它会包罗下列四个只读属性。
       
  •     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复制内容到剪贴板
       
  • <!DOCTYPE html>      
  • <htmllanghtmllang="en">      
  • <head>      
  •   <title>The Battery Status API - Example</title>      
  •   <metacharsetmetacharset="UTF-8"/>      
  •   <script>      
  •     window.addEventListener("load", function() {      
  •       var battery = navigator.battery || navigator.mozBattery;      
  •       function displayBatteryStats() {      
  •         document.getElementById("charging").textContent = (battery.charging) ? "charging" : "not charging";      
  •         document.getElementById("chargingtime").textContent = battery.chargingTime;      
  •         document.getElementById("dischargingtime").textContent = battery.dischargingTime;      
  •         document.getElementById("level").textContent = battery.level * 100;      
  •       }      
  •       if (battery) {      
  •         displayBatteryStats();      
  •         battery.addEventListener("chargingchange", displayBatteryStats, false);      
  •         battery.addEventListener("chargingtimechange", displayBatteryStats, false);      
  •         battery.addEventListener("dischargingtimechange", displayBatteryStats, false);      
  •         battery.addEventListener("levelchange", displayBatteryStats, false);      
  •       } else {      
  •         document.getElementById("stats").textContent = "Sorry, your browser does not support the Battery Status API";      
  •       }      
  •     }, false);      
  •   </script>      
  • </head>      
  • <body>      
  •   <dividdivid="stats">      
  •     Your battery is currently <spanidspanid="charging"></span>.<br/>      
  •     Your battery will be charged in <spanidspanid="chargingtime"></span> seconds.<br/>      
  •     Your battery will be discharged in <spanidspanid="dischargingtime"></span> seconds.<br/>      
  •     Your battery level is <spanidspanid="level"></span>%.      
  •   </div>      
  • </body>      
  • </html>  
结论
本文为Battery Status API给出了一个完备的总结和展示,尽管其仍未得到主流支持,但是这只是时间题目。思量到移动互联网的激增,开发者应该尽快将电池信息纳入计划范畴内。

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作