无法检索传输只读状态服务器_如何使用HTML5检索和显示电池状态

除了引入新元素之外，Web标准背后的人们W3C还引入了一组JavaScript API，这些API使开发人员可以与设备系统进行通信，包括获取电池状态。

如今，无处不在的人们都在使用他们的移动设备，手机和平板电脑。 电池动力仍然是自然界不可抗拒的力量，但我们将在另一天对此进行讨论。

例如，当您构建一个可以运行某个功能以从电池中消耗掉电量的应用程序时，此API可能会派上用场。 如果我们可以检索电池信息，然后在电量未达到应用程序要求的情况下显示通知，这将建议用户相应地管理其资源。

如何使用电池状态API

但是，在此示例中，我不会构建应用程序。 相反，我们将简单地检索电池状态并将其显示在浏览器中。 遗憾的是，此API的支持并不出色。 在撰写本文时，它仅适用于Firefox 10+（带前缀） 。

电池是通过navigator.battery定义的，要获取电池电量，我们使用navigator.battery.level 。 电池电量输出为十进制格式，因此我们将其乘以100以删除十进制数字，如下所示。

var battery  = navigator.battery,
	level	 = battery.level * 100,
	levelBar = $('.level');

该API还提供了charging属性，我们可以使用该属性来确定电池是否处于充电状态。

在下面的代码片段中，我们根据电池状态将HTML类添加到HTML标记中，以便稍后我们可以在CSS中添加特定的样式规则。

if (battery.charging) {
	levelBar.addClass('charging');
} else if (level > 65) {
	levelBar.addClass('high');
} else if (level >= 35 ) {
	levelBar.addClass('med');
} else {
	levelBar.addClass('low');
};

在上面的代码中，如果电池正在充电，我们将添加一个名为charging的类，然后在指定的电池级别范围内分别添加high ， med和low类。 然后，我们还需要指定应遵循电池电量水平的条形宽度。

if (!battery.charging) {
	levelBar.css('width', level + '%');
};

在CSS中，我们设置电池的样式和颜色，如下所示；

.battery .level {
	height: 100%;
	width: 2%;
}
.battery .level.high {
	background-color: #27AE60;	
}
.battery .level.med {
	background-color: #E67E22;	
}
.battery .level.low {
	background-color: #E74C3C;	
}
.battery .level.charging {
	background-color: #27AE60;	
	width: 100%;
	text-align: center;
}
.battery .level.charging:before {
	content: '\e800';
	display: block;
	height: 100%;
	width: 100%;
	color: #fff;
	line-height: 40px;
	font-family: 'Battery';
	font-size: 25px;
}

仅此而已，请转到演示页面以查看实际操作。 只需确保您使用的是便携式设备（如笔记本电脑），然后在最新的Firefox中打开演示，演示便可以正常工作。

• 观看演示
• 下载源

进一步参考

• 电池状态API — W3C
• 电池状态API — MDN

翻译自: https://www.hongkiat.com/blog/html5-battery-status/