QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads HTML5 Battery Status API with Code Example

HTML5 Battery Status API with Code Example

This post is a part 2 of Advanced JavaScript APIs post series.

Battery status API can be used in mobile and desktop browsers. It gives us the battery status(charging or not) and level(percentage remaining).

window.navigator.batter property is the heart of Battery status API.

var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery || navigator.msBattery;
 
if(battery)
{
    console.log("Battery level: " + Math.floor(battery.level * 100) + "%" );//battery level returns a value between 0 and 1. 1 means 100%
    console.log("Device is: " + (battery.charging ? "charging" : "discharging"));//battery.charing returns boolean value
    console.log("Time required for charing: " + battery.chargingTime);//in seconds
    console.log("Time required for discharing: " + battery.dischargingTime);//in seconds

    //charging or discharging, status changed
    battery.addEventListener("chargingchange", function(){
        console.log("Time required for charing: " + battery.chargingTime);
    }, false);

    //battery level changed
    battery.addEventListener("levelchange", function(){
        console.log("Battery level: " + Math.floor(battery.level * 100) + "%" );
    }, false);

    //total charging time changed
    battery.addEventListener("chargingtimechange", function(){
        console.log("Time required for charing: " + battery.chargingTime);
    }, false);
   
    //total discharging time changed
    battery.addEventListener("dischargingtimechange", function(){
        console.log("Time required for discharing: " + battery.dischargingTime);
    }, false);
}
else
{
    alert("Battery Status API not supported");
}
Jan 28, 2015Narayan Prusty
JavaScript Vibration API with DemoHTML5 Full Screen API Tutorial with Demo
Comments: 1
  1. Antonio
    7 years ago

    Hi! I read your page all the time. Congrats!

    This example doesn’t work in chrome but in firefox its perfect. I want to do this in an app for Intel XDK, but doesn’t work.
    Any idea?

    thanks!

    ReplyCancel

Leave a Reply to Antonio Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image7 years ago 1 Comment Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
Related Articles
  • Page Visibility API Tutorial with Example
  • Web Alarms API Tutorial
  • HTML5 Full Screen API Tutorial with Demo
  • Web Notification API Tutorial with Example
  • Speech Recognition and Synthesis Using JavaScript
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license