HTML5获取电池状态信息的方法

最新推荐文章于 2024-06-23 01:24:37 发布

春风欲雨

最新推荐文章于 2024-06-23 01:24:37 发布

阅读量1.2k

点赞数

分类专栏：前端小知识点文章标签：获取电池信息

本文链接：https://blog.csdn.net/WebDestiny/article/details/100659492

版权

前端小知识点专栏收录该内容

69 篇文章 1 订阅

订阅专栏

注意：该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性。

<!DOCTYPE html>
<html>
  <head>
    <title>Battery Status API Example</title>
    <script>
      window.onload = function() {
        function updateBatteryStatus(battery) {
          console.log(battery);
          /* 只读. 一个布尔值,表示了系统电池的充电状态.如果电池正在充电,则返回true,其他情况,比如无法获取
                系统电池的充电状态,或者系统不使用电池,或者电池不在充电,都返回false. */
          console.log(battery.charging);
          /* 只读. 一个数字,单位为秒.表示了系统的电池的电量等级,从0到1.0.如果电量已经完全消耗完,则返回0,
                如果电量为充满状态,或者无法获取到这个等级值,以及如果系统没有电池,则返回1.0 */
          console.log(battery.level);
          /* 只读.一个数字,单位为秒.表示了电池中的电量还剩多长时间会消耗完毕.如果电池正在充电,或者无法获取到
                这个时间值,以及如果系统没有电池,则返回正无穷大. */
          console.log(battery.dischargingTime / 60);
          /* 只读. 一个整字,单位为秒.表示了电池还剩多长时间充满电.如果电池已经充满电了,则返回0.如果电池不在充电,
                或者无法获取到这个时间值,则返回正无穷大. */
          console.log(battery.chargingTime);
        }
        /* chargingchange;
        当charging属性值发生改变时触发该事件.

        chargingtimechange;
        当chargingTime属性值发生改变时触发该事件.

        dischargingtimechange;
        当dischargingTime属性值发生改变时触发该事件.

        levelchange;
        当level属性值发生改变时触发该事件. */
        
        navigator.getBattery().then(function(battery) {
          //当promise解决后，最初更新电池状态...
          updateBatteryStatus(battery);

          // ..以及任何后续更新.
          battery.onchargingchange = function() {
            updateBatteryStatus(battery);
          };

          battery.onlevelchange = function() {
            updateBatteryStatus(battery);
          };

          battery.ondischargingtimechange = function() {
            updateBatteryStatus(battery);
          };
        });
      };
    </script>
  </head>

  <body>
    <div id="charging">charging state unknown</div>
    <div id="level">battery level unknown</div>
    <div id="dischargeTime">discharging time unknown</div>
  </body>
</html>

需要注意的是，这些API存在不兼容问题，需要在使用时加上浏览器前缀。
以下是事件处理程序（及其相应的事件处理程序的事件类型）必须支持的batterymanager对象属性：

事件处理程序	事件处理程序事件类型
onchargingchange	chargingchange
onchargingtimechange	chargingtimechange
ondischargingtimechange	dischargingtimechange
onlevelchange	levelchange

拓展：

HTML5常用API

页面可见性API——Page Visibility
API全屏API——Full Screen
访问摄像头和麦克风——getUserMedia API
电池API——Battery API
预加载——Link Prefetching
监听屏幕旋转变化接口: ——orientationchange
手机震动: ——window.navigator.vibrate(200)
当前语言: ——navigator.language
联网状态: ——navigator.onLine
页面可编辑: ——contentEditable
浏览器活跃窗口监听: ——window.onblur & window.onfocus

春风欲雨

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5获取电池状态信息的方法

注意：该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性。<!DOCTYPE html><html> <head> <title>Battery Status API Example</title> <script> w...
复制链接

扫一扫

专栏目录