HTML5 中的电池状态 API 是什么？

简介：有时称为电池 API 的电池状态API 提供有关计算机电池的信息。它提供电池的剩余电量和充电状态。它还给出了对电池完全充电或电池在充电或放电时放电的剩余时间的估计。

电池状态 API 不是外部 API。它在内置window.navigator内的navigator.getBattery()方法中可用 导航器的属性 目的。  

获取电池对象：

• 使用navigator.getBattery()方法获取系统的电池信息。
• 将 JavaScript then()方法添加到navigator.getBattery()对象。 then()方法是必需的，因为用作参数的函数只有在我们从系统中成功获取电池信息时才会执行。
• 用作then()方法参数的函数将电池对象作为参数。此电池对象携带有关系统电池的所有信息。

现在让我们了解 Battery Status API 的不同方法。

1.battery.charging方法：该方法用于获取电池的充电状态。

• 返回值：如果电池正在充电，则返回布尔值“true”，如果电池未充电，则返回“false”。
• 充电改变事件：我们可以通过向电池对象添加事件监听器来检测电池充电状态的变化。如果发生' chargingchange '事件，则将触发事件监听函数。

句法：

Javascript

  
    // Event listener for 'chargingchange' event
    battery.addEventListener('chargingchange', function () {
  
        // Code after the event is triggered
    });
      
    // battery.charging object
    var isBatteryCharging = battery.charging

2. battery.level 方法：该方法以数字形式返回电池电量，假设电池电量为 1。我们必须将其乘以 100 才能获得电池电量百分比。

• levelchange 事件：这个 事件检测电池电量的变化。每当电池电量发生变化时，我们可以通过向事件“levelchange”添加事件侦听器来触发我们的条件。

句法：

Javascript

  
    // An eventListener to 'levelchange' event
    battery.addEventListener('levelchange', function () {
  
        // Code after the event is triggered
    });
  
    // battery.level object
    var batteryPercentage = battery.level * 100

3.battery.chargingTime 方法：该方法以秒为单位返回电池完全充电的估计剩余时间。如果电池未连接到充电器，则返回“Infinity”。

• chargetimechange 事件：此事件检测此估计时间的变化。我们可以为这个事件添加一个监听器并更新它。

句法：

Javascript

  
    // 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

4.battery.dischargingTime 方法：该方法以秒为单位返回电池完全放电的估计剩余时间。如果电池连接到充电器，它会返回“Infinity”。

• 放电时间变化事件：此事件检测此估计时间的变化。我们可以为这个事件添加一个监听器并更新它。

句法：

Javascript

  
    // Listener to 'dischargingtimechange' event.
    battery.addEventListener('dischargingtimechange', 
        function () {
  
        // Code after the event is triggered
    });
  
    // battery.dischargingTime method
    var disCharge = battery.dischargingTime

示例：在此示例中，我们使用 Battery Status API 获取电池状态并在我们的网页上显示数据。

HTML

  

    GeeksforGeeks
    
        
            The Battery Percentage is:
            0
        
  
        
            Is Battery Charging? :
            No
        
  
        
            Battery Charging Time:
            
        
  
        
            Battery discharging Time:
            
        
    
  
    
        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
            }
        });
    

  

输出：

• 连接充电器：

带充电器

• 不带充电器：

由于未连接充电器，因此将电池充电时间显示为“Infinity” 。