HTML5_html5 チュートリアル スキルでバッテリーの状態を表示するための API の紹介

ネットワーク トラフィックにおけるモバイル デバイスの割合は大幅に増加しており、モバイル デバイスが寄与するネットワーク トラフィックは非常に膨大であるため、モバイル デバイス用にいくつかの API と設計コンセプトを個別に作成しました。非常に典型的な例は、アプリケーションがデバイスのバッテリー ステータス情報を取得できるようにする W3C Battery Status API です。この記事では、この新しい API について説明し、それを既存のアプリケーションに統合する方法を示します。
デバイスが

をサポートしているかどうかを確認します

現時点では、バッテリー API はまだ主流のサポートがありません。したがって、この API を使用する前に、現在のデバイスがこの API をサポートしているかどうかを確認する必要があります。以下に示す関数は、現在のブラウザがバッテリー ステータス API をサポートしているかどうかを示すブーン値 (True/False) を返します。

この関数はまず、navigator.battery オブジェクトが存在するかどうかを検出します。存在しない場合は、引き続き Mozilla 固有の

を検出します。

navigator.mozBattery が存在するかどうか。 webkitBattery オブジェクトも検出するコードをいくつか見たことがありますが、それが Chrome に存在するかどうかは確認できません。

参考ドキュメント: https://developer.mozilla.org/en-US/docs/DOM/window.navigator.battery

XML/HTML コードコンテンツをクリップボードにコピー

1. functionisBatteryStatusSupported() {
2. return!!(navigator.battery || navigator.mozBattery);
}

バッテリーを確認してください

バッテリー オブジェクトが存在する場合、次の 4 つの読み取り専用プロパティが含まれます。

充電中 - (ブーン値) システムのバッテリーが現在充電中かどうかを示します。

システムにバッテリーが存在しない場合、またはバッテリーが充電されているかどうかを判断できない場合、戻り値は True になります

chargeTime - (数値) バッテリーが完全に充電されるまでにかかる時間 (単位: 秒)

バッテリーが完全に充電されている場合、またはシステムにバッテリーがない場合、この値は 0 です。

システムが充電中でない場合、または完全に充電するのに必要な時間が決定できない場合、この値は ∞ (無限大) になります。

dischargingTime -chargeTime と同様、バッテリーが完全に放電してシステムがスリープ状態になるまでの残り時間 (単位: 秒) (数値) (単位: 秒)

放電時間が決定できない場合、システムにバッテリーがないか、システムが充電中の場合、この値は ∞ (無限大) になります

レベル —— (数値) デバイスの現在の電力レベル。値は (0 ～ 1.0) の範囲で、電力残量の割合に対応します。

1.0 は、バッテリーが完全に充電されているか、バッテリーがないか、値を特定できないことを意味します。

バッテリーイベントの検出
上記のプロパティはすべてバッテリー イベントにバインドされています。これらのイベントは、バッテリー状態の変化を示すために使用されます。たとえば、電源を接続すると、充電プロパティが false から true に変わります。 4 つのバッテリー イベントすべてを以下に示します:

chargechange - このタイプのイベントは、課金属性が変更されるとトリガーされます。このイベントは、onchargingchange() イベント ハンドラーによってキャプチャおよび処理できます。

Chargingtimechange - このタイプのイベントは、chargetime 属性が変更されるとトリガーされます。このイベントは、onchargingtimechange() イベント ハンドラーによってキャプチャおよび処理できます。
• dischargingtimechange - このタイプのイベントは、dischargingTime プロパティが変更されたときにトリガーされます。このイベントは、ondischargingtimechange() イベント ハンドラーによってキャプチャおよび処理できます。
  Levelchange - このタイプのイベントは、レベル属性が変更されるとトリガーされます。このイベントは、onlevelchange() イベント ハンドラーによってキャプチャおよび処理できます。
  
  

サンプルページ
次のコードは、Battery Status API のプロパティとイベントの使用方法を示しています。

サンプル ページには API のさまざまなプロパティ値が表示され、イベントがトリガーされるとそれらの値が更新されます。

ここをクリックしてください

オンラインサンプルにアクセスしてください。

XML/HTML コード

コンテンツをクリップボードにコピー

1. >
2. <htmllanghtmllang="en" >
3. <頭>
4. <title>バッテリーステータス API - 例タイトル>
5. <metacharsetmetacharset="UTF-8"/>
6. <スクリプト>
7. window.addEventListener("load", function() {
8. var バッテリー = ナビゲーター.battery || ナビゲーター.mozバッテリー;   
9. 関数 displayBatteryStats() {
10. document.getElementById("charging").textContent = (battery.charging) ? 「充電中」:「充電していません」;   
11. document.getElementById("chargingtime").textContent = バッテリー.chargingTime;   
12. document.getElementById("dischargingtime").textContent = バッテリー.dischargingTime;   
13. document.getElementById("level").textContent = バッテリー.level * 100;   
14. }
15. if (バッテリー) {
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 = 「申し訳ありませんが、お使いのブラウザはバッテリー ステータス API をサポートしていません」;   
23. }
24. }、 間違い）;   
25. スクリプト>
26. 頭>
27. <ボディ>
28. <除算除算="統計" >
29. お使いのバッテリーは現在、<spanidspanid=「充電中」>スパン>.<br/>
30. バッテリーは<spanidspanid="充電時間" で充電されます。 >スパン> 秒。<br/>
31. バッテリーは<spanidspanid="放電時間"で放電されます。 >スパン> 秒。<br/>
32. あなたのバッテリー残量は <spanidspanid="レベル">スパン>%。   
33. div>
34. ボディ>
35. html>

结论

ここではバッテリー ステータス API を完全にサポートしていますが、これは時間の問題です。