Pengenalan kepada API untuk memaparkan status bateri dalam kemahiran tutorial HTML5_html5

Bahagian peranti mudah alih dalam trafik rangkaian berkembang dengan ketara, dan trafik rangkaian yang disumbangkan oleh mereka sangat besar sehingga kami telah mencipta beberapa API dan konsep reka bentuk secara berasingan untuk peranti mudah alih. Contoh yang sangat tipikal ialah API Status Bateri W3C, yang membolehkan aplikasi mendapatkan maklumat status bateri peranti. Artikel ini meneroka API baharu ini dan menunjukkan kepada anda cara menyepadukannya ke dalam aplikasi sedia ada anda.
Semak sama ada peranti menyokong

Pada masa ini, API bateri masih tidak mempunyai sokongan arus perdana. Oleh itu, sebelum menggunakan API ini, anda perlu mengesahkan sama ada peranti semasa menyokong API ini. Fungsi yang ditunjukkan di bawah mengembalikan nilai Boone (Benar/Salah) yang menunjukkan sama ada penyemak imbas semasa menyokong API status bateri.

Fungsi ini mula-mula mengesan sama ada objek navigator.bateri wujud. Jika tidak hadir, teruskan mengesan

khusus Mozilla

Sama ada navigator.mozBattery wujud. Saya telah melihat beberapa kod yang turut mengesan objek webkitBattery, tetapi saya tidak dapat mengesahkan bahawa ia wujud dalam Chrome.

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

Kod XML/HTMLSalin kandungan ke papan keratan

1. functionisBatteryStatusSupported() {
2. kembali!!(navigator.bateri || navigator.mozBattery);
}

Periksa bateri

Jika objek bateri wujud, ia akan mengandungi empat sifat baca sahaja berikut.

Mengecas - (Nilai Boone) Menunjukkan sama ada bateri sistem sedang dicas.

Jika tiada bateri dalam sistem, atau tidak dapat ditentukan sama ada bateri sedang dicas, nilai pulangan adalah Benar

masa pengecasan - (nilai angka) Masa yang diambil untuk bateri dicas sepenuhnya (unit: saat)

Apabila bateri dicas sepenuhnya, atau tiada bateri dalam sistem, nilai ini ialah 0.

Jika sistem tidak mengecas, atau masa yang diperlukan untuk mengecas sepenuhnya tidak dapat ditentukan, nilai ini ialah ∞ (infiniti).

masa nyahcas - serupa dengan Masa pengecasan, (nilai angka) baki masa (unit: saat) sehingga bateri dinyahcas sepenuhnya dan sistem tidur (unit: saat)

Jika masa nyahcas tidak dapat ditentukan, atau sistem tidak mempunyai bateri atau sistem sedang mengecas, nilai ini ialah ∞ (infiniti)

Tahap

—— (nilai angka) Tahap kuasa semasa peranti. Nilai berada dalam julat (0 ~ 1.0), sepadan dengan peratusan kuasa yang tinggal.

1.0 bermaksud bateri telah dicas sepenuhnya, atau tiada bateri, atau nilainya tidak dapat ditentukan.

Kesan peristiwa bateri
Semua sifat di atas terikat pada peristiwa bateri. Peristiwa ini digunakan untuk menunjukkan perubahan dalam status bateri. Sebagai contoh, memalamkan sumber kuasa menukar sifat pengecasan daripada palsu kepada benar. Kesemua empat peristiwa bateri disenaraikan di bawah:

chargingchange - Peristiwa jenis ini akan dicetuskan apabila atribut pengecasan berubah. Acara ini boleh ditangkap dan dikendalikan oleh pengendali acara onchargingchange().

Chargingtimechange - Jenis peristiwa ini akan dicetuskan apabila atribut masa pengecasan berubah. Acara ini boleh ditangkap dan dikendalikan oleh pengendali acara onchargingtimechange().
• dischargingtimechange - Peristiwa jenis ini akan dicetuskan apabila sifat dischargingTime berubah. Acara ini boleh ditangkap dan dikendalikan oleh pengendali acara ondischargingtimechange().
  Levelchange - Jenis peristiwa ini akan dicetuskan apabila atribut tahap berubah. Acara ini boleh ditangkap dan dikendalikan oleh pengendali acara onlevelchange().
  
  

Contoh halaman
Kod berikut menunjukkan cara menggunakan sifat dan peristiwa API Status Bateri.

Halaman contoh memaparkan pelbagai nilai sifat API dan mengemas kini nilainya apabila peristiwa dicetuskan.

Klik di sini

untuk mengakses contoh dalam talian.

Kod XML/HTML

Salin kandungan ke papan keratan

1. html>  
2. htmllanghtmllang="en" >  
3. kepala>  
4.   tajuk>API Status Bateri - Contoh tajuk>  
5.   metacharsetmetacharset="UTF-8"/>  
6.   skrip>  
7.     window.addEventListener("load", function() {   
8.       var bateri = navigator.bateri | navigator.mozBateri;   
9.       fungsi displayBatteryStats() {   
10.         document.getElementById("mengecas").textContent = (bateri.mengecas) ? "mengecas" : "tidak mengecas";   
11.         document.getElementById("masa pengecasan").Kandungan teks = bateri.Masa pengecasan;   
12.         document.getElementById("dischargingtime").textContent = bateri.masa nyahcas;   
13.         document.getElementById("level").textContent = bateri.level * 100;   
14.       }   
15.       jika (bateri) {   
16.         displayBatteryStats();   
17.         bateri.addEventListener("chargingchange", displayBatteryStats, false);   
18.         bateri.addEventListener("chargingtimechange", displayBatteryStats, false);   
19.         bateri.addEventListener("dischargingtimechange", displayBatteryStats, false);   
20.         bateri.addEventListener("levelchange", displayBatteryStats, false);   
21.       } lain {   
22.         document.getElementById("stats").textContent = "Maaf, pelayar anda tidak menyokong API ";   
23.       }   
24.     }, salah);   
25.   skrip>  
26. kepala>  
27. badan>  
28.   bahagibahagi="statistik" >  
29.     Bateri anda pada masa ini sepanyolspanyol="mengecas" >>jarak>.br/>  
30.     Bateri anda akan dicas dalam spanyolspanyol="masa pengecasan" >jarak> saat.br/>  
31.     Bateri anda akan dinyahcas dalam sepanyolspanyol=sepanyolspanyol="> >jarak> saat.
br/>       Tahap bateri anda sepanyolsepanyol="tahap">
32. span>%.      
33. div>  
34. badan>  

html

>  

结论 API Status Bateri考虑到移动互联网的激增，开发者应该尽快将电池信息纳入设计范畴内。