從Mozilla Aurora 11起，火狐瀏覽器裏實現了一些新功能，其中一個就是對電池狀態接口的基本實現。這個很簡單的接口能提供你關於電池當前電量，是否在充電等信息，以及一些電池狀態變化事件。讓我們來看看效果！
charging:表示當前電池設備是否在充電。如果電池沒有充電，這個值爲false。如果爲true，表明電池正在充電。當前的API實現裏不能得到是否充滿的信息，也無法判斷當前設備是否有電池。chargingTime:是指距離電池充滿還需要多久。dischargingTime: 電池已使用時間。level:表示電量等級，從0到1.0。當這個值爲0時，表示電量耗盡，系統即將關機。如果爲1.0，則表示電池滿電。
針對這些狀態，接口裏提供了各自相應的事件，包括onchargingchange, onchargingtimechange,ondischargingtimechange, 和
onlevelchange。基本的用法很簡單：
// 獲取電池對象! var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery; // 顯示一些有用屬性值 console.warn("電池充電狀態: ", battery.charging); // true console.warn("電量水平: ", battery.level); // 0.58 console.warn("電池使用時間: ", battery.dischargingTime); // 設置一些事件監聽器 battery.addEventListener("chargingchange", function(e) { console.warn("電池充電狀態變化: ", battery.charging); }, false); battery.addEventListener("chargingtimechange", function(e) { console.warn("電池充電時間變化: ", battery.chargingTime); }, false); battery.addEventListener("dischargingtimechange", function(e) { console.warn("電池使用時間變化: ", battery.dischargingTime); }, false); battery.addEventListener("levelchange", function(e) { console.warn("電量水平變化: ", battery.level); }, false);
很簡單，不是嗎？這幾個接口都非常的棒：簡單，高效，實用！
charging:表示當前電池設備是否在充電。如果電池沒有充電，這個值爲false。如果爲true，表明電池正在充電。當前的API實現裏不能得到是否充滿的信息，也無法判斷當前設備是否有電池。chargingTime:是指距離電池充滿還需要多久。dischargingTime: 電池已使用時間。level:表示電量等級，從0到1.0。當這個值爲0時，表示電量耗盡，系統即將關機。如果爲1.0，則表示電池滿電。
針對這些狀態，接口裏提供了各自相應的事件，包括onchargingchange, onchargingtimechange,ondischargingtimechange, 和
onlevelchange。基本的用法很簡單：
// 獲取電池對象! var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery; // 顯示一些有用屬性值 console.warn("電池充電狀態: ", battery.charging); // true console.warn("電量水平: ", battery.level); // 0.58 console.warn("電池使用時間: ", battery.dischargingTime); // 設置一些事件監聽器 battery.addEventListener("chargingchange", function(e) { console.warn("電池充電狀態變化: ", battery.charging); }, false); battery.addEventListener("chargingtimechange", function(e) { console.warn("電池充電時間變化: ", battery.chargingTime); }, false); battery.addEventListener("dischargingtimechange", function(e) { console.warn("電池使用時間變化: ", battery.dischargingTime); }, false); battery.addEventListener("levelchange", function(e) { console.warn("電量水平變化: ", battery.level); }, false);
很簡單，不是嗎？這幾個接口都非常的棒：簡單，高效，實用！
爲什麼要使用這些電池編程接口？因爲很多用瀏覽器封裝的移動應用(非‘native’)需要知道系統的當前狀態。有些CPU對電量很敏感，在處理某些特殊任務前要設備有足夠的電量，App應事先提醒用戶電量不足，請充電。
爲什麼要使用這些電池編程接口？因爲很多用瀏覽器封裝的移動應用(非‘native’)需要知道系統的當前狀態。有些CPU對電量很敏感，在處理某些特殊任務前要設備有足夠的電量，App應事先提醒用戶電量不足，請充電。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>JavaScript裏獲取電池狀態的方法 – LONG</title>
<style type="text/css">
img.wp-smiley,
img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 .07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
</style>
</head>
<body class="single single-demo postid-829 masthead-fixed full-width footer-widgets singular whole-width">
<p>在你的瀏覽器的console裏查看電池的狀態信息。</p>
<h2>你的電池</h2>
<p> </p>
<div id="battery" style="border: 1px solid #000; width: 200px;">
<div id="batteryLevel" style="min-height: 30px; font-size: 40px; text-align: center; color: #000; background: #ddd;"></div>
</div>
<p> </p>
<p><strong>充電狀態：</strong> <span id="chargingStatus"></span></p>
<script>// Get the battery!
var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery;
// A few useful battery properties
if(battery) {
console.warn("Battery charging: ", battery.charging);
console.warn("Initial battery level: ", battery.level);
// Add a few event listeners - NOT WORKING
oldOL = window.onload;
window.onload = function() {
if(oldOL) oldOL();
var node = document.getElementById("batteryLevel");
var change = function(e) {
console.warn("Battery level change: ", battery.level);
var perc = (battery.level * 100) + "%";
node.style.width = perc;
node.innerHTML = perc;
};
var chargeChange = function() {
console.warn("Battery charge change: ", battery.charging);
var chargeNode = document.getElementById("chargingStatus");
chargeNode.innerHTML = "<span style='color:" + (battery.charging ? "green" : "red") + "'>" + (battery.charging ? "充電中" : "未充電") + "</span>";
};
battery.addEventListener("chargingchange", chargeChange, false);
battery.addEventListener("chargingtimechange", function(e) {
console.warn("Battery charge time change: ", battery.chargingTime);
}, false);
battery.addEventListener("dischargingtimechange", function(e) {
console.warn("Battery discharging time change: ", battery.dischargingTime);
}, false);
battery.addEventListener("levelchange", change, false);
change();
chargeChange();
};
}
else {
console.warn("Your browser does not have the navigator.mozBattery object");
}</script>
</body>
</html>
<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/
Page Caching using disk: enhanced
Served from: www.webhek.com @ 2016-09-11 15:59:21 by W3 Total Cache -->