获取电池级JavaScript

时间:2015-11-04 11:53:54

标签: javascript battery batterylevel

/!\使用window.navigator.battery IS STRONGLY DISCOURAGED这个问题现在不值得检查谢谢/!\

我想获得当前系统的电池电量。这是我打算得到的输出:

如果桌面(没有电池) 电池电量:100%

如果笔记本电脑 电池电量:XXX%(取决于级别)

所以我在 window.navigator.battery 中尝试了JSFiddle上的Mozilla基金会片段。

问题:运行Chrome 20+版本(目前为46),我在控制台上仍有错误:

  

未捕获的TypeError:无法读取未定义的属性“addEventListener”

所以我理解的是,假设电池电量实例化的对象battery没有返回任何内容。

有人已经弄清楚了吗?

此代码段工作时算法的重点是定义用户无法执行的有关剩余电池电量的操作。例如,我不希望用户采取可能会将电池电量降低到临界点并使关键操作失败的繁重操作。

5 个答案:

答案 0 :(得分:6)

来自English version of that page

  

此功能已从Web标准中删除。虽然有些浏览器可能仍然支持它,但它正在被删除。不要在旧项目或新项目中使用它。使用它的页面或Web应用程序可能随时中断。

  

battery属性已弃用,已被Navigator.getBattery()方法替换为电池Promise。它的支持仍然是部分的。

答案 1 :(得分:2)

警告

不要在生产中使用以下答案,因为它是deprecated since then。由于privacy and security issues,规范将被重新修改,因此期望看到更改和故障。

<强> ANSWER

要回答我自己的问题,感谢 @Quentin 提供给我的文档的帮助,我使用BatteryManager.level函数实现了我的目标Navigator.getBattery()。可以在此处找到提供工作代码段的链接:https://developer.mozilla.org/en-US/docs/Web/API/BatteryManager/level

以下JSFiddle在控制台(F12)中显示剩余电量的值(我无法在桌面上验证输出,所以如果它不能在桌面上工作,请纠正我):

<强> JSFiddle

<强>的JavaScript

navigator.getBattery().then(function(battery) {

    var level = battery.level;

    console.log(level);
});

答案 2 :(得分:1)

Navigator.getBattery()现在已过时。尽管它可能在某些浏览器中仍然可以使用,但是不建议使用它,因为可以随时将其删除。

答案 3 :(得分:1)

包括作品、演示和代码
我向您推荐Battery API
您可以在 Here 找到演示或在 Here
找到代码 它非常有用并且提供了很多关于
的信息 电池。 免费使用。
单击下面以显示截取的 StackOverflow 代码

(function() {
  let batterySupported = document.getElementById("battery-supported"),
    batteryLevel = document.getElementById("battery-level"),
    chargingStatus = document.getElementById("charging-status"),
    batteryCharged = document.getElementById("battery-charged"),
    batteryDischarged = document.getElementById("battery-discharged");

  let success = function(battery) {
    if (battery) {
      function setStatus() {
        console.log("Set status");
        batteryLevel.innerHTML = Math.round(battery.level * 100) + "%";
        chargingStatus.innerHTML = (battery.charging) ? "" : "not ";
        batteryCharged.innerHTML = (battery.chargingTime == "Infinity") ?         
"Infinity" : parseInt(battery.chargingTime / 60, 10);
        batteryDischarged.innerHTML = (battery.dischargingTime == "Infinity") 
? "Infinity" : parseInt(battery.dischargingTime / 60, 10);
      }

      // Set initial status
      setStatus();

      // Set events
      battery.addEventListener("levelchange", setStatus, false);
      battery.addEventListener("chargingchange", setStatus, false);
      battery.addEventListener("chargingtimechange", setStatus, false);
      battery.addEventListener("dischargingtimechange", setStatus, false);
    } else {
      throw new Error('Battery API not supported on your device/computer');
    }
  };

  let noGood = function(error) {
    batterySupported.innerHTML = error.message;
  };

  navigator.getBattery() //returns a promise
    .then(success)
    .catch(noGood);
})();
@import url('https://fonts.googleapis.com/css2? 
   family=Roboto:wght@300&display=swap');

/* General font styles */

html {
  font-family: 'Roboto', sans-serif;
  height: 100%;
}

body {
  font-family: 'Roboto', sans-serif;
}

img {
  border: none;
  vertical-align: middle;
}


/* Basic element styles */

a {
  color: #0366d6;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

html {
  color: #000;
}

body {
  padding-top: 20px;
}

body {
  margin-bottom: 30px;
}

ul {
  margin: 10px 0;
}


/* Structure */

.container {
  background: #fff;
  border-top: none;
  text-align: center;
}

#battery-supported {
  color: #f00;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Battery API</title>
</head>

<body>

  <div class="container">
    <h1>
      Battery API demo
    </h1>

    <section class="main-content">
      <p>A demo of the Battery API</p>

      <p id="battery-supported"></p>

      <p>Battery level is <b id="battery-level"></b></p>

      <p>Battery status is <b id="charging-status"></b><b>charging</b></p>

      <p>Battery will be fully charged in <b id="battery-charged"></b> 
minutes.</p>

      <p>Battery will be discharged in <b id="battery-discharged"></b> 
minutes.</p>


    </section>

        <p class="footer">All the code is available in the <a 
href="https://github.com/robnyman/robnyman.github.com/tree/master/battery">
 Battery 
repository on GitHub</a>.</p>
  </div>




</body>

</html>

答案 4 :(得分:0)

event.target.level是事件处理程序中的级别值。

navigator.getBattery().then((battery) => {

    battery.ondischargingtimechange = (event) => { 
       console.warn(`Discharging : `, event.target.level) 
    };

    battery.onchargingtimechange = (event) => { 
       console.info(`Charging : `, event.target.level) ;
    };
});

enter image description here