Давайте розглянемо Battery API - ще одну новинку в javaScript, яка появіласть на світло з розвитком html5 і мобільних девайсів. Задокументовано вона зовсім недавно (12.2012) і поки доступна тільки для тестування тільки в Firexfox (мобільному і десктопном). Розробники Chrome обіцяють реалізацію незабаром. Battery js API дозволяє отримати всіляку інформацію про заряд батареї, а також стежити за зміною заряду за допомогою багатого набору подій.
А навіщо взагалі цей API потрібен в браузері? Так як багато мобільні додатки живуть всередині браузерної оболонки (в повному обсязі "рідні"), для них було б здорово мати доступ до інформації про систему. Деякі процеси є досить енергоємними (webGl наприклад) і було б не погано отримувати повідомлення про низький рівень заряду батареї і т.п.
У будь-якому випадку, справжня корисність цього API повинна стати очевидною найближчим часом!
Давайте розглянемо приклад (код в кінці статті):
демо
battery API demo
Як влаштовано battery API?
Об'єкт window.navigator.battery має наступні поля:
charging: поточний статус зарядки батареї. Зряжается - true, розряджається - false. У поточній імплементації ми не можемо дізнатися, приєднана взагалі батарея і т.п.
chargingTime: Час (в секундах), що залишився до повної зарядки батареї.
dischargingTime: Час (в секундах), що залишився до повної розрядки батареї.
level: Поточний рівень заряду акумулятора за шкалою від 0 до 1. Встановлюється в 0, якщо заряд батареї вичерпано, система ось-ось "помре" відповідно дорівнює 1, якщо акумулятор повністю заряджений.
Для кожного з цих покзателей є своє подія: onchargingchange, onchargingtimechange, ondischargingtimechange і onlevelchange.
Простий приклад:
JS
// Поки браузери ще не домовилися .. піклуємося про це самі! var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery; console.log ( "Cтатус зарядки батареї:", battery.charging); // true console.log ( "Рівень зарядки батареї:", battery.level); // 0.58 console.log ( "Залишилося часу:", battery.dischargingTime); // 600 battery.addEventListener ( "chargingchange", function (e) {console.log ( "Змінено статус зарядки батареї:", battery.charging);}, false); battery.addEventListener ( "chargingtimechange", function (e) {console.log ( "Змінено час до кінця зарядки:", battery.chargingTime);}, false); battery.addEventListener ( "dischargingtimechange", function (e) {console.log ( "Змінено час, що залишився до розрядки:", battery.dischargingTime);}, false); battery.addEventListener ( "levelchange", function (e) {console.log ( "Змінено рівень зарядки:", battery.level);}, false);Давайте розглянемо код прикладу на початку статті:
html
<Div class = "battery"> <div class = "battery_core"> <div class = "battery_status"> </ div> </ div> <div class = "battery_stat"> <div class = "battery_stat_percent"> </ div> <div class = "battery_stat_other"> </ div> </ div> </ div>js
var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery; function setStatus (eventName) {if (battery) {var chargingPercent = Math.round (battery.level * 100); var chargingStatus = (battery.charging)? "<Strong class = 'yes'> Charging </ strong>": "<strong class = 'no'> Not charging </ strong>"; var chargingTime = (battery.chargingTime == "Infinity")? "<Span class = 'no'> - </ span>": parseInt (battery.chargingTime / 60, 10); var dischargingTime = (battery.dischargingTime == "Infinity")? "<Span class = 'no'> - </ span>": parseInt (battery.dischargingTime / 60, 10); document.getElementsByClassName ( "battery_stat_percent") [0] .innerHTML = chargingPercent + "%"; document.getElementsByClassName ( "battery_status") [0] .style.width = chargingPercent + "%"; document.getElementsByClassName ( "battery_stat_other") [0] .innerHTML = chargingStatus + "<br/> Charging time:" + chargingTime + "<br/> Discharging time:" + dischargingTime; } Else {document.getElementsByClassName ( "battery_stat_percent") [0] .innerHTML = ":("; document.getElementsByClassName ( "battery_stat_other") [0] .innerHTML = "battery Api <br> не працює <br> в твоєму браузері "}} if (battery) {battery.addEventListener (" levelchange ", setStatus, false); battery.addEventListener (" chargingchange ", setStatus, false); battery.addEventListener (" chargingtimechange ", setStatus, false); battery.addEventListener ( "dischargingtimechange", setStatus, false);} setStatus ();Я не буду приводити CSS, щоб не засмічувати статтю. Ви завжди можете знайти його, проінспектувавши демо в вашому улюбленому браузері.
Успіхів!
А навіщо взагалі цей API потрібен в браузері?Round (battery.level * 100); var chargingStatus = (battery.charging)?
Quot;<Span class = 'no'> - </ span>": parseInt (battery.chargingTime / 60, 10); var dischargingTime = (battery.dischargingTime == "Infinity")?