Hello Friends My Name Is Viraj,Today I Will Create Battery Charging Effect On Your Web Page.If you’re lucky, you’ll get seven or eight hours usage from a smart phone or tablet before the battery dies. Expect around half that on a laptop. Battery technology has not kept pace with advances in mobile computing. A decade ago you could expect your Palm Pilot to last up to a month on a couple of AAA batteries. Now you’re feeding devices every night and your room lights up like a blinking red and green LED version of Las Vegas.Few of us worry about battery life when developing web applications, but perhaps we should be more considerate now that mobile access has reached one in five users. Fortunately, the W3C Battery Status API has been implemented by both Mozilla and Google — and it’s very simple to use.Heavy-duty processing has a noticeable impact on battery life and handset heat! Other than fast-action games, few web applications should require complex on-going client-side calculations. I suspect there’s little you can practically do other than suggesting the user plugs-in to continue.
You should also note that many of these options may be applicable to the Page Visibility API. For example, if a game isn’t running in the active tab, it can be paused until the user returns.At the time of writing, only Firefox desktop and mobile editions offer unprefixed support for the Battery API (versions 10 to 16 used the moz prefix). It is also available in recent editions of Chromium with a webkit prefix.Here In This Html Tutorial We Will Create Battery Charging Effect In Html/Css/Javascript Code.Here In This Blog We Will Create Battery Charging Effect In Html/Css/Javascript Code.Here Is An Example Related To Topic...............................
So Let Begin With Our Coding............
Step 1 :
<!DOCTYPE html>
<html>
<style>
#div1 {
font-size:48px;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<div id="div1" class="fa"></div>
<script>
function chargebattery() {
var a;
a = document.getElementById("div1");
a.innerHTML = "";
setTimeout(function () {
a.innerHTML = "";
}, 1000);
setTimeout(function () {
a.innerHTML = "";
}, 2000);
setTimeout(function () {
a.innerHTML = "";
}, 3000);
setTimeout(function () {
a.innerHTML = "";
}, 4000);
}
chargebattery();
setInterval(chargebattery, 5000);
</script>
<p>This example demonstrates how to use an icon library to make an animated effect.</p>
</body>
</html>
You should also note that many of these options may be applicable to the Page Visibility API. For example, if a game isn’t running in the active tab, it can be paused until the user returns.At the time of writing, only Firefox desktop and mobile editions offer unprefixed support for the Battery API (versions 10 to 16 used the moz prefix). It is also available in recent editions of Chromium with a webkit prefix.Here In This Html Tutorial We Will Create Battery Charging Effect In Html/Css/Javascript Code.Here In This Blog We Will Create Battery Charging Effect In Html/Css/Javascript Code.Here Is An Example Related To Topic...............................
So Let Begin With Our Coding............
Step 1 :
<!DOCTYPE html>
<html>
<style>
#div1 {
font-size:48px;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<div id="div1" class="fa"></div>
<script>
function chargebattery() {
var a;
a = document.getElementById("div1");
a.innerHTML = "";
setTimeout(function () {
a.innerHTML = "";
}, 1000);
setTimeout(function () {
a.innerHTML = "";
}, 2000);
setTimeout(function () {
a.innerHTML = "";
}, 3000);
setTimeout(function () {
a.innerHTML = "";
}, 4000);
}
chargebattery();
setInterval(chargebattery, 5000);
</script>
<p>This example demonstrates how to use an icon library to make an animated effect.</p>
</body>
</html>
Output :
No comments:
Post a Comment