方法一: window监听online/offline判断网络是否连接

<div id="status"></div>
<script type="text/javascript">
window.addEventListener('load', function() {
  var status = document.getElementById("status");
  function OnWay(){
  status.innerHTML = "已连接"
  }
   function OffWay(){
  status.innerHTML = "已断开"
  }
  window.addEventListener('online',  OnWay); // 监听网络连接
  window.addEventListener('offline', OffWay); // 监听离线断网
});

方法二：navigator.onLine监听网络状态，连接为true，断开为false

if (navigator.onLine) {
     console.log('网络连通');
} else {
     console.log('网络断开');
}

注意：两种网络连接监听方法在本地测试都需要手动切换浏览器的连接状态，否则是看不到效果的！