HTML5_html5 튜토리얼 기술에서 배터리 상태를 표시하기 위한 API 소개

네트워크 트래픽에서 모바일 장치가 차지하는 비중이 크게 증가하고 있으며, 모바일 장치가 기여하는 네트워크 트래픽이 너무 커서 우리는 모바일 장치용으로 일부 API와 디자인 컨셉을 별도로 만들었습니다. 매우 일반적인 예는 애플리케이션이 장치의 배터리 상태 정보를 얻을 수 있도록 하는 W3C 배터리 상태 API입니다. 이 기사에서는 이 새로운 API를 살펴보고 이를 기존 애플리케이션에 통합하는 방법을 보여줍니다.
해당 기기가

을 지원하는지 확인하세요.

현재 배터리 API는 아직 주류 지원을 받지 않습니다. 따라서 이 API를 사용하기 전에 현재 기기가 이 API를 지원하는지 확인해야 합니다. 아래 표시된 함수는 현재 브라우저가 배터리 상태 API를 지원하는지 여부를 나타내는 Boone 값(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)
3. }

배터리 확인

배터리 개체가 존재하는 경우 다음과 같은 네 가지 읽기 전용 속성이 포함됩니다.

• 충전 중 - (분 값) 시스템 배터리가 현재 충전 중인지 여부를 나타냅니다.

시스템에 배터리가 없거나 배터리가 충전 중인지 확인할 수 없는 경우 반환 값은 True

• 충전시간 - (숫자값) 배터리가 완전히 충전되는 데 걸리는 시간 (단위: 초)

배터리가 완전히 충전되었거나 시스템에 배터리가 없는 경우 이 값은 0입니다.

시스템이 충전 중이 아니거나 완전히 충전하는 데 필요한 시간을 확인할 수 없는 경우 이 값은 무한대입니다.

• dischargeTime - 충전 시간과 유사, (숫자 값) 배터리가 완전히 방전되고 시스템이 절전 모드로 전환될 때까지 남은 시간(단위: 초)

방전 시간을 확인할 수 없거나 시스템에 배터리가 없거나 시스템이 충전 중인 경우 이 값은 (무한대)입니다.

• level —— (숫자 값) 장치의 현재 전력 수준입니다. 값은 남은 전력 비율에 해당하는 (0 ~ 1.0) 범위입니다.

1.0은 배터리가 완전히 충전되었거나 배터리가 없거나 값을 확인할 수 없음을 의미합니다.

배터리 이벤트 감지

위의 모든 속성은 배터리 이벤트에 바인딩됩니다. 이러한 이벤트는 배터리 상태의 변화를 나타내는 데 사용됩니다. 예를 들어, 전원을 연결하면 충전 속성이 false에서 true로 변경됩니다. 네 가지 배터리 이벤트가 모두 아래에 나열되어 있습니다.

• Chargingchange - 이 유형의 이벤트는 과금 속성이 변경될 때 트리거됩니다. 이 이벤트는 onchargechange() 이벤트 핸들러에 의해 캡처되고 처리될 수 있습니다.
  충전 시간 변경 - 이 유형의 이벤트는 충전 시간 속성이 변경될 때 트리거됩니다. 이 이벤트는 onchargetimechange() 이벤트 핸들러로 캡처하고 처리할 수 있습니다.
  dischargetimechange - 이 유형의 이벤트는 dischargeTime 속성이 변경될 때 트리거됩니다. 이 이벤트는 ondischargetimechange() 이벤트 핸들러로 캡처하고 처리할 수 있습니다.
  레벨 변경 - 이 유형의 이벤트는 레벨 속성이 변경될 때 트리거됩니다. 이 이벤트는 onlevelchange() 이벤트 핸들러로 캡처하고 처리할 수 있습니다.

샘플 페이지

다음 코드는 Battery Status API의 속성과 이벤트를 사용하는 방법을 보여줍니다.

샘플 페이지에는 API의 다양한 속성 값이 표시되고 이벤트가 트리거될 때 해당 값이 업데이트됩니다.

여기를 클릭하여 온라인 예시를 확인하세요.

XML/HTML 코드클립보드에 콘텐츠 복사

1. html>  
2. htmllanghtmllang="ko" >  
3. 머리>  
4.   제목>배터리 상태 API - 예시 제목>  
5.   메타 문자 세트메타 문자 세트="UTF-8"/>  
6.   스크립트>  
7.     window.addEventListener("load", function() {   
8.       var 배터리 = 네비게이터.battery || navigator.mozBattery;   
9.       기능 displayBatteryStats() {   
10.         document.getElementById("충전").textContent = (배터리.충전) ? "충전 중" : "충전 중이 아님";   
11.         document.getElementById("chargetime").textContent = 배터리.chargeTime;   
12.         document.getElementById("dischargetime").textContent = 배터리.dischargeTime;   
13.         document.getElementById("level").textContent = 배터리.level * 100;   
14.       }   
15.       if (배터리) {   
16.         displayBatteryStats();   
17.         battery.addEventListener("chargechange", displayBatteryStats, false);   
18.         battery.addEventListener("chargetimechange", displayBatteryStats, false);   
19.         battery.addEventListener("dischargetimechange", displayBatteryStats, false);   
20.         battery.addEventListener("levelchange", displayBatteryStats, false);   
21.       } 그렇지 않으면 {   
22.         document.getElementById("stats").textContent = "죄송합니다. 브라우저에서 배터리 상태 API를 지원하지 않습니다.";   
23.       }   
24.     }, 거짓);   
25.   스크립트>  
26. 머리>  
27. 몸>  
28.   분할분할="통계" >  
29.     배터리는 현재 spanidspanid="충전 중">스팬>.br/>  
30.     배터리는 spanidspanid="충전 시간"으로 충전됩니다. >범위>초.br/>  
31.     배터리는 spanidspanid="dischargetime"에 방전됩니다. >범위>초.br/>  
32.     배터리 수준은 spanidspanid="level">스팬>%.   
  
33. div>  
34. 몸>  
35. html>  

结论

본문은 배터리 상태 API를 통해 제공됩니다.互联网的激增，开发者应该尽快将电池信息纳入设计范畴内。