<!DOCTYPE html>
<html>
<head>
<title>Web API Battery Example</title>
</head>
<body>
<h1>Battery Information</h1>
<p id="battery-level">Battery Level: N/A</p>
<p id="charging-status">Charging: N/A</p>
<p id="charging-time">Charging Time: N/A</p>
<p id="discharging-time">Discharging Time: N/A</p>
<script>
// Check if the Battery API is supported in
// the current browser
if ('getBattery' in navigator || 'battery' in navigator) {
// Use navigator.getBattery() if available (newer browsers)
const batteryPromise = navigator.getBattery ?
navigator.getBattery() : navigator.battery;
batteryPromise.then(function (battery) {
// Display battery information
updateBatteryInfo(battery);
// Add event listeners for battery status changes
battery.addEventListener('chargingchange',
function () {
updateBatteryInfo(battery);
});
battery.addEventListener('chargingtimechange',
function () {
updateBatteryInfo(battery);
});
battery.addEventListener('dischargingtimechange',
function () {
updateBatteryInfo(battery);
});
battery.addEventListener('levelchange',
function () {
updateBatteryInfo(battery);
});
});
} else {
// Battery API is not supported
alert('Battery API is not supported in this browser.');
}
// Function to update battery information on the page
function updateBatteryInfo(battery) {
document.getElementById('battery-level')
.textContent =
`Battery Level: ${battery.level * 100}%`;
document.getElementById('charging-status')
.textContent =
`Charging: ${battery.charging ? 'Yes' : 'No'}`;
document.getElementById('charging-time')
.textContent =
`Charging Time: ${battery.chargingTime} seconds`;
document.getElementById('discharging-time')
.textContent =
`Discharging Time: ${battery.dischargingTime} seconds`;
}
</script>
</body>
</html>