Introducción: la API de estado de la batería, a veces denominada API de batería, proporciona información sobre la batería de la computadora. Proporciona el nivel de batería restante y el estado de carga de la batería. También da una estimación del tiempo restante para cargar completamente la batería o descargar la batería si se está cargando o descargando.
La API de estado de la batería no es una API externa. Está disponible en el método navigator.getBattery() dentro de la propiedad window.navigator incorporada del navigatorobject.
Obtener el objeto de la batería:
- Obtén la información de la batería del sistema usando el método navigator.getBattery() .
- Agrega un método JavaScript then() al objeto navigator.getBattery() . El método then() es necesario porque la función utilizada como parámetro solo se ejecutará cuando obtengamos con éxito la información de la batería del sistema.
- La función utilizada como parámetro para el método then() toma el objeto batería como argumento. Este objeto de batería lleva toda la información sobre la batería del sistema.
Ahora comprendamos los diferentes métodos de la API de estado de la batería.
1. método de carga de la batería: este método se utiliza para obtener el estado de carga de la batería.
- Valor devuelto: Devuelve un booleano ‘verdadero’ si la batería se está cargando activamente y ‘falso’ si la batería no se está cargando.
- evento de cambio de carga: podemos detectar el cambio en el estado de carga de la batería agregando detectores de eventos al objeto de la batería. Si se produce el evento ‘cambio de carga ‘, se activará la función de escucha de eventos.
Sintaxis:
Javascript
<script>
// Event listener for 'chargingchange' event
battery.addEventListener('chargingchange', function () {
// Code after the event is triggered
});
// battery.charging object
var isBatteryCharging = battery.charging
</script>
2. método de nivel de batería: este método devuelve el nivel de batería como un número asumiendo que el nivel de batería completo es 1. Tenemos que multiplicarlo por 100 para obtener el nivel de batería en porcentaje.
- Evento de cambio de nivel : este evento detecta el cambio en el nivel de la batería. Podemos activar nuestras condiciones siempre que cambie el nivel de la batería agregando un detector de eventos al evento ‘cambio de nivel’.
Sintaxis:
Javascript
<script>
// An eventListener to 'levelchange' event
battery.addEventListener('levelchange', function () {
// Code after the event is triggered
});
// battery.level object
var batteryPercentage = battery.level * 100
</script>
3. Método battery.chargingTime: este método devuelve el tiempo estimado restante para cargar completamente la batería en segundos. Devuelve ‘Infinito’ si la batería no está conectada a un cargador.
- evento de cambio de tiempo de carga: este evento detecta el cambio en este tiempo estimado. Podemos agregar un oyente a este evento y actualizarlo.
Sintaxis:
Javascript
<script>
// A listener to chargingtimechange event
battery.addEventListener('chargingtimechange',
function () {
// Code after the event is triggered
});
// Time left for completion of charging
var chargingTimeLeft = battery.chargingTime
</script>
4. Método battery.dischargingTime: este método devuelve el tiempo estimado restante para descargar completamente la batería en segundos. Devuelve ‘Infinito’ si la batería está conectada a un cargador.
- evento de cambio de tiempo de descarga: este evento detecta el cambio en este tiempo estimado. Podemos agregar un oyente a este evento y actualizarlo.
Sintaxis:
Javascript
<script>
// Listener to 'dischargingtimechange' event.
battery.addEventListener('dischargingtimechange',
function () {
// Code after the event is triggered
});
// battery.dischargingTime method
var disCharge = battery.dischargingTime
</script>
Ejemplo: en este ejemplo, hemos obtenido el estado de la batería mediante la API de estado de la batería y mostramos los datos en nuestra página web.
HTML
<!DOCTYPE html>
<html lang="en">
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<div class="battery-info">
<p>
<b>The Battery Percentage is:</b>
<span id="battery-percentage">0</span>
</p>
<p>
<b>Is Battery Charging? :</b>
<span id="is-battery-charging">No</span>
</p>
<p>
<b>Battery Charging Time:</b>
<span id="chargingtime"></span>
</p>
<p>
<b>Battery discharging Time:</b>
<span id="dischargingtime"></span>
</p>
</div>
<script>
navigator.getBattery().then(function (battery) {
function showAllBatteryInfo() {
editChargeInfo();
editLevelInfo();
editChargingInfo();
editDischargingInfo();
}
showAllBatteryInfo();
battery.addEventListener('chargingchange',
function () {
editChargeInfo();
});
function editChargeInfo() {
/* Test with the charger and without
charger by unpluging*/
var isBatteryCharging = (battery.charging ? "Yes" : "No")
document.getElementById('is-battery-charging')
.innerText = isBatteryCharging
}
battery.addEventListener('levelchange', function () {
editLevelInfo();
});
function editLevelInfo() {
/* Shows the battery level*/
var batteryLevel = battery.level * 100
document.getElementById('battery-percentage')
.innerText = batteryLevel
}
battery.addEventListener('chargingtimechange', function () {
editChargingInfo();
});
function editChargingInfo() {
/* Test with the charger and without charger by unpluging*/
var charge = battery.chargingTime
document.getElementById('chargingtime').innerText = charge
}
battery.addEventListener('dischargingtimechange', function () {
editDischargingInfo();
});
function editDischargingInfo() {
var disCharge = battery.dischargingTime
document.getElementById('dischargingtime')
.innerText = disCharge
}
});
</script>
</body>
</html>
Producción:
- Con cargador conectado:
con el cargador
- Sin cargador:
Como el cargador no está conectado, muestra el tiempo de carga de la batería como ‘Infinito’ .
Publicación traducida automáticamente
Artículo escrito por akashkumarsen4 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA