JavaScript里获取电池状态的方法

最新推荐文章于 2025-01-02 11:01:05 发布

hxl1995

最新推荐文章于 2025-01-02 11:01:05 发布

阅读量2.2k

点赞数

分类专栏： javascript 文章标签： javascript

javascript 专栏收录该内容

1 篇文章

订阅专栏

从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应事先提醒用户电量不足，请充电。

观看演示

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