HTML5的1个显示信息电池情况的API简介

日期:2020-12-11 类型:科技新闻 

关键词:ps网页版在线制作,静态网页制作方法,微云网页版,怎么制作一个网页,django网页模板

挪动机器设备的市场份额在互联网总流量中在很多提高,其所奉献的互联网总流量十分巨大,以致于以便挪动机器设备,大家独立建立了1些API和设计方案理念。1个十分典型的事例是 W3C电池情况API,它容许1个运用程序流程得知机器设备的电池情况信息内容。这篇文章内容探寻了这个新的API,为你展现了怎样把它整合进你现有的运用程序流程。
 检验机器设备是不是适用

现阶段电池API依然沒有获得流行适用。因而,在应用这个API前必须确定当今机器设备是不是适用此API。下面展现的涵数回到1个布恩值(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. }  

查验电池

假如电池目标存在,它会包括以下4个写保护特性。

  •     charging —— (布恩值)标示系统软件的电池当今是不是正在充电。

    假如系统软件不存在电池,或没法明确电池是不是在充电,回到值是 True

  •     chargingTime —— (标值)电池彻底填满电量所需的時间(企业:秒)

    当电池彻底被填满电时,或系统软件不存在电池时,这个值为0。

    假如系统软件不在充电,或没法明确彻底填满电所需時间,这个值为∞(无限大)。

  •     dischargingTime —— 和chargingTime类似,(标值)到电池彻底放电直至系统软件休眠状态剩下的時间(企业:秒)

    假如放电時间没法明确,或 系统软件沒有电池 或 系统软件正在充电,这个值为 ∞ (无限大)

  •     level —— (标值) 机器设备当今电量级别。赋值在(0 ~ 1.0)区段,与剩下电量百分比对应。

    1.0表明电池彻底填满电,或不存在电池,或标值没法明确。


检验电池恶性事件

上述全部特性都与1个电池恶性事件关联。这些恶性事件用来标示电池情况的转变。例如,插进开关电源会使charging特性从false变成true。所有4种电池恶性事件以下所列:

  •     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⑻"/>  
  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得出了1个详细的总结和展现,虽然其仍未获得流行适用,可是这只是時间难题。考虑到到挪动互联网技术的激增,开发设计者应当尽快将电池信息内容列入设计方案范围内。