Einführung in eine API zur Anzeige des Batteriestatus in HTML5_html5-Tutorial-Fähigkeiten

Der Anteil mobiler Geräte am Netzwerkverkehr nimmt erheblich zu und der von ihnen verursachte Netzwerkverkehr ist so groß, dass wir einige APIs und Designkonzepte separat für mobile Geräte erstellt haben. Ein sehr typisches Beispiel ist die W3C Battery Status API, die es einer Anwendung ermöglicht, Informationen zum Batteriestatus des Geräts abzurufen. Dieser Artikel untersucht diese neue API und zeigt Ihnen, wie Sie sie in Ihre vorhandenen Anwendungen integrieren können.
Überprüfen Sie, ob das Gerät

unterstützt

Derzeit bietet die Batterie-API noch keine Mainstream-Unterstützung. Daher müssen Sie vor der Verwendung dieser API bestätigen, ob das aktuelle Gerät diese API unterstützt. Die unten gezeigte Funktion gibt einen Boone-Wert (True/False) zurück, der angibt, ob der aktuelle Browser die Batteriestatus-API unterstützt.

Diese Funktion erkennt zunächst, ob das navigator.battery-Objekt vorhanden ist. Falls nicht vorhanden, weiterhin Mozilla-spezifisches

erkennen

Ob navigator.mozBattery existiert. Ich habe Code gesehen, der auch das webkitBattery-Objekt erkennt, kann aber nicht bestätigen, dass es in Chrome vorhanden ist.

Referenzdokumentation: https://developer.mozilla.org/en-US/docs/DOM/window.navigator.battery

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. functionisBatteryStatusSupported() {
2. zurück!!(navigator.battery || navigator.mozBattery);
3. }

Überprüfen Sie die Batterie

Wenn das Batterieobjekt vorhanden ist, enthält es die folgenden vier schreibgeschützten Eigenschaften.

• Wird geladen – (Boone-Wert) Zeigt an, ob der Akku des Systems gerade geladen wird.

Wenn keine Batterie im System vorhanden ist oder nicht festgestellt werden kann, ob die Batterie geladen wird, ist der Rückgabewert True

• Ladezeit – (numerischer Wert) Die Zeit, die benötigt wird, bis der Akku vollständig aufgeladen ist (Einheit: Sekunden)

Wenn der Akku vollständig geladen ist oder sich kein Akku im System befindet, ist dieser Wert 0.

Wenn das System nicht lädt oder die zum vollständigen Laden erforderliche Zeit nicht ermittelt werden kann, ist dieser Wert ∞ (unendlich).

• disLadezeit – ähnlich wie Ladezeit, (numerischer Wert) die verbleibende Zeit (Einheit: Sekunden), bis der Akku vollständig entladen ist und das System in den Ruhezustand geht (Einheit: Sekunden)

Wenn die Entladezeit nicht ermittelt werden kann, das System keinen Akku hat oder das System lädt, ist dieser Wert ∞ (unendlich)

• level —— (numerischer Wert) Der aktuelle Leistungspegel des Geräts. Der Wert liegt im Bereich von (0 ~ 1,0) und entspricht dem verbleibenden Leistungsprozentsatz.

1,0 bedeutet, dass der Akku vollständig geladen ist, kein Akku vorhanden ist oder der Wert nicht ermittelt werden kann.

Batterieereignisse erkennen

Alle oben genannten Eigenschaften sind an ein Batterieereignis gebunden. Diese Ereignisse werden verwendet, um Änderungen im Batteriestatus anzuzeigen. Wenn Sie beispielsweise eine Stromquelle anschließen, ändert sich die Ladeeigenschaft von „falsch“ in „wahr“. Alle vier Batterieereignisse sind unten aufgeführt:

• Ladeänderung – Diese Art von Ereignis wird ausgelöst, wenn sich das Ladeattribut ändert. Dieses Ereignis kann vom Ereignishandler onchargerchange() erfasst und verarbeitet werden.
  Ladezeitänderung – Diese Art von Ereignis wird ausgelöst, wenn sich das Ladezeitattribut ändert. Dieses Ereignis kann vom Ereignishandler onchargetimechange() erfasst und verarbeitet werden.
  discreasingtimechange – Diese Art von Ereignis wird ausgelöst, wenn sich die Eigenschaft „discreasingTime“ ändert. Dieses Ereignis kann vom Ereignishandler ondischaratingtimechange() erfasst und verarbeitet werden.
  Levelchange – Diese Art von Ereignis wird ausgelöst, wenn sich das Levelattribut ändert. Dieses Ereignis kann vom Ereignishandler onlevelchange() erfasst und verarbeitet werden.

Beispielseite

Der folgende Code zeigt, wie die Eigenschaften und Ereignisse der Battery Status API verwendet werden.

Auf der Beispielseite werden die verschiedenen Eigenschaftswerte der API angezeigt und ihre Werte aktualisiert, wenn das Ereignis ausgelöst wird.

Klicken Sie hier , um auf Online-Beispiele zuzugreifen.

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. >  
2. <htmllanghtmllang="en" >  
3. <Kopf>  
4.   <Titel>Die Batteriestatus-API - BeispielTitel>  
5.   <MetacharsetMetacharset="UTF-8"/>  
6.   <Skript>  
7.     window.addEventListener("load", function() {   
8.       var battery = navigator.battery || navigator.mozBattery;   
9.       Funktion displayBatteryStats() {   
10.         document.getElementById("Laden").textContent = (Batterie.Laden) ? „Laden“: „Wird nicht geladen“;   
11.         document.getElementById("Ladezeit").textContent = Batterie.Ladezeit;   
12.         document.getElementById("disLadezeit").textContent = Batterie.disLadezeit;   
13.         document.getElementById("level").textContent = battery.level * 100;   
14.       }   
15.       wenn (Batterie) {   
16.         displayBatteryStats();   
17.         battery.addEventListener("chargeingchange", displayBatteryStats, false);   
18.         battery.addEventListener("chargetimechange", displayBatteryStats, false);   
19.         battery.addEventListener("discreasingtimechange", displayBatteryStats, false);   
20.         battery.addEventListener("levelchange", displayBatteryStats, false);   
21.       } else {   
22.         document.getElementById("stats").textContent = "Leider unterstützt Ihr Browser die Batteriestatus-API nicht";   
23.       }   
24.     }, FALSCH);   
25.   Skript>  
26. Kopf>  
27. <Körper>  
28.   <dividdivid="stats" >  
29.     Deine Batterie wird derzeit <spanidspanid="geladen">span>.<br/>  
30.     Ihre Batterie wird in <SpanischSpanisch="Ladezeit" aufgeladen. >Spanne> Sekunden.<br/>  
31.     Ihre Batterie wird in <SpanidSpanid="Entladezeit" entladen. >Spanne> Sekunden.<br/>  
32.     Dein Akkustand ist <spanidspanid="level">Spanne> %.   
33.   div>  
34. Körper>  
35. html>  

结论

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