Question

是编程的新手，我对无法工作的事物感到烦恼。

问题是：我倾向于根据连接状态将引导程序徽章危险更改为徽章成功。

我正在使用的脚本是：

<script>
    function updateIndicator() {
        document.getElementById('indicator').textContent = navigator.onLine ? 'online' : 'offline';
    }
</script>

使用：

<body onload="updateIndicator()" ononline="updateIndicator()" onoffline="updateIndicator()">
<p>The network is: <span id="indicator">(state unknown)</span>

我觉得解决方案非常简单。：P 我尝试放置：

<span class="badge badge-pill badge-danger">Disconnected</span>

在代码中的其他地方，但是没有运气。

Answer 1

function updateIndicator() {
  let indicator = document.getElementById('indicator')
  indicator.className = navigator.onLine ? 'badge badge-pill badge-success' : 'badge badge-pill badge-danger';
  indicator.textContent = navigator.onLine ? 'online' : 'offline';
}

<link rel="stylesheet"  href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"/>
<body onload="updateIndicator()" ononline="updateIndicator()" onoffline="updateIndicator()">
  <p>The network is: <span id="indicator">(state unknown)</span>

您还可以通过Windows事件在线收听

window.addEventListener('online',updateIndicator);
window.addEventListener('offline',updateIndicator);

断开连接后更改Bootstrap徽标危险

1 个答案: