HTML5では新たにバッテリーAPIが実装され、バッテリーの情報が取得出来るようになりました。
ただし、一部のブラウザにはまだ非対応だったりするので注意してください。
私の方で確認が出来ているのはFirefoxだけです。
ちなみに現在のあなたの環境はです。

充電量

現在の充電量：
充電量

現在の充電量：<span id="battery_level_val"></span>

<script>
var ele = document.getElementById("battery_level_val");

var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery;

if (!battery){
	// 未対応
	ele.innerHTML= "未対応";
}else{
	// 対応
	ele.innerHTML= (battery.level * 100) + "%";
}
</ script>

battery.levelで取得出来ます。
注意としてはbattery.levelで取得した値は1=100%の充電量になりますので気をつけてください。

充電の状態の取得

現在：

現在：<span id="battery_charging"></span>

<script>
var ele = document.getElementById("battery_charging");

var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery;

if (!battery){
	// 未対応
	ele.innerHTML= "未対応";
}else{
	if (battery.charging){
		ele.innerHTML = "充電中";
	}else{
		ele.innerHTML = "非充電";
	}
}
</ script>

battery.charging = true|falseで充電の状態を受け取ります。
true = 充電中
false = 非充電

充電完了までの時間

充電完了時間：

充電完了時間：<span id="charging_time"></span>

<script>
var ele = document.getElementById("charging_time");

var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery;

if (!battery){
	// 未対応
	ele.innerHTML= "未対応";
}else{
	if(battery.chargingTime== "Infinity"){
		ele.innerHTML = "放電中のため取得できません。"
	}else{
		ele.innerHTML = battery.chargingTime + "秒";
	}
}
</ script>

返り値はdouble型で秒数で返ってきます。
放電中は【Infinity】が返ってくるので気をつけてください。

放電完了（電池が切れる）までの時間

放電完了時間：

放電完了時間：<span id="discharging_time"></span>

<script>
var ele = document.getElementById("discharging_time");

var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery;

if (!battery){
	// 未対応
	ele.innerHTML= "未対応";
}else{
	if(battery.discharging== "Infinity"){
		ele.innerHTML = "充電中のため取得できません。"
	}else{
		ele.innerHTML = battery.dischargingTime + "秒";
	}
}
</ script>

返り値はdouble型で秒数で返ってきます。
充電中は【Infinity】が返ってくるので気をつけてください。

イベントの発生

充電、放電の変化やバッテリーの変化が起こった時のイベントを受け取れます。

onchargingchange
充電、放電のイベント：event_type ‘chargingchange’

onchargingtimechange
充電時間のイベント：event_type ‘chargingtimechange’

ondischargingtimechange
放電時間のイベント：event_type ‘dischargingtimechange’

onlevelchange
バッテリーのイベント：event_type ‘levelchange’

var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery;
function changeBatteryStatus() {
	var msg = "バッテリー: " + battery.level * 100 + " %";
	if(battery.charging) {
		msg = "\r\n充電中";
		msg = "\r\n充電完了まで" + battery.chargingTime + "秒";
	}else{
		msg = "\r\n放電中";
		msg = "\r\n放電完了まで" + battery.discharging + "秒";
	}
}

// 充電、放電状態のイベント
battery.addEventListener("chargingchange", updateBatteryStatus);
// 充電時間のイベント
battery.addEventListener("onchargingtimechange", updateBatteryStatus);
// 放電時間のイベント
battery.addEventListener("ondischargingtimechange", updateBatteryStatus);
// バッテリーのイベント
battery.addEventListener("levelchange", updateBatteryStatus);

«前の記事：file_get_contentsが使えない時の対処方法HTML5 バイブレーション API：次の記事»