js获取当前设备的电量信息以及联网状态

最新推荐文章于 2025-07-17 10:39:07 发布

原创最新推荐文章于 2025-07-17 10:39:07 发布 · 4.4k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#电量信息 #联网状态

前端同时被 2 个专栏收录

71 篇文章

订阅专栏

JavaScript

13 篇文章

订阅专栏

本文介绍了一种使用navigator.getBattery()获取设备电量信息的方法，并通过监听chargingchange和levelchange事件实时更新电量状态。同时，文章还展示了如何利用window.navigator.onLine判断网络连接状态，以及通过监听offline和online事件实现网络状态的实时监测。

1.电量信息

 navigator.getBattery().then(function(battery) {
        // 是否正在充电，yes-充电
        console.log("Battery charging? " + (battery.charging ? "yes" : "no"));
        // 当前剩余电量
        console.log("Battery level: " + battery.level * 100 + "%");

        battery.addEventListener("chargingchange", function() {
          console.log("Battery charging? " + (battery.charging ? "yes" : "no"));
        });

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

2.网络状态

 // true为连接成功
      console.log("网络状态："+window.navigator.onLine)
      window.addEventListener("offline", function(e) {
         console.log("offline")
      });

      window.addEventListener("online", function(e) {
        console.log("online")
      });
    }