前言

谷歌浏览器的网络切换可以在F12面板中的Network选项卡中调试。

---

效果图

代码实现

Html

<div id="idCard" class="plr_20 color_f5 radius_6 fw_700 fs_68"></div>

JavaScript

function getNetworkInfo() {
    let info = undefined;

    if (navigator.onLine) {
        info = {
            type: navigator.connection.effectiveType,
            rtt: navigator.connection.rtt,
            downlink: navigator.connection.downlink
        };
    } else {
        info = {
            type: 'offline'
        };
    }

    return info;
}

function updateInfo() {
    const info = getNetworkInfo();
    const idCard = document.querySelector('#idCard');

    if (info.type === 'offline') {
        idCard.innerHTML = `
            <p>网络状态：离线</p>
            <p>延迟：离线</p>
            <p>带宽：离线</p>
        `;
        idCard.classList.add('bc_ff4500');
        idCard.classList.remove('bc_00ffff');
    } else {
        idCard.innerHTML = `
            <p>网络状态：${info.type}</p>
            <p>延迟：${info.rtt}</p>
            <p>带宽：${info.downlink}</p>
        `;
        idCard.classList.add('bc_00ffff');
        idCard.classList.remove('bc_ff4500');
    }
}

updateInfo();

// 在线切换
window.addEventListener('online', updateInfo);
// 离线切换
window.addEventListener('offline', updateInfo);
// 网络类型切换(2G/3G/4G)
navigator.connection.addEventListener('change', updateInfo);

// 轮巡
setInterval(updateInfo, 1000);

addEventListener

w3school
定义

addEventListener()方法将事件处理程序附加到元素。

参数	描述
type	必需。事件的名称。 请不要使用 "on" 前缀。 请使用 "click" 而不是 "onclick"。 DOM事件的完整列表
function	必需。事件发生时运行的函数。
useCapture	可选（default = false）。 false - 处理程序在冒泡阶段执行。 true - 处理程序在捕获阶段执行。

技术细节

该方法将把指定的事件监听器函数添加到当前节点的监听器集合中，以处理指定类型type的事件。如果useCapture为true，则监听器被注册为捕捉事件监听器。如果useCapture为false，它被注册为普通事件监听器。
addEventListener()可能被调用多次，在同一个节点上为同一种类型的事件注册多个事件句柄。但要注意，DOM不能确定多个事件句柄被调用的顺序。
如果一个事件监听器函数在同一个节点上用相同的type和useCapture参数注册了两次，那么第二次注册将被忽略。如果正在处理一个节点上的事件时，在这个节点上注册了一个新的事件监听器，则不会为那个事件调用新的事件监听器。
当用Node.cloneNode()方法或Document.importNode()方法复制一个Document节点时，不会复制为原始节点注册的事件监听器。
这个方法也在Document和Window对象上定义了，而且工作方式类似。

navigator

W3SCHOOL

window.navigator对象包含有关访问者的信息。
window.navigator对象可以不带window前缀来写。
navigator.appName
navigator.appCodeName
navigator.platform
cookieEnabled属性返回true，如果cookie已启用，否则返回false

MDN

Navigator接口表示用户代理的状态和标识。它允许脚本查询它和注册自己进行一些活动。
可以使用只读的window.navigator属性检索navigator对象。