写一个网络不通时则提醒用户的方法

function checkNetworkStatus() {
  return navigator.onLine;
}

function handleNetworkStatusChange() {
  if (!checkNetworkStatus()) {
    // 网络断开时的处理逻辑
    showAlert("网络连接已断开，请检查网络设置。");
  } else {
    // 网络连接时的处理逻辑 (可选)
    hideAlert(); // 隐藏之前的断网提示
    // ... 其他逻辑，例如重新加载数据等
  }
}

function showAlert(message) {
  // 显示提示信息，例如：
  const alertElement = document.createElement("div");
  alertElement.id = "network-alert";
  alertElement.textContent = message;
  alertElement.style.cssText = `
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    background-color: #f44336; /* 红色背景 */
    color: white;
    text-align: center;
    z-index: 9999;
  `;
  document.body.appendChild(alertElement);


}

function hideAlert() {
  const alertElement = document.getElementById("network-alert");
  if (alertElement) {
    alertElement.remove();
  }
}

// 初始状态检查
handleNetworkStatusChange();

// 监听网络状态变化
window.addEventListener('online', handleNetworkStatusChange);
window.addEventListener('offline', handleNetworkStatusChange);


//  更进一步的改进： 定期检查网络状态 (例如每隔 5 秒)

setInterval(() => {
  handleNetworkStatusChange();
}, 5000);


//  更进一步的改进： 使用更友好的 UI 库来显示提示信息，例如 SweetAlert2


//  使用 SweetAlert2 的示例 (需要先引入 SweetAlert2 库):

// import Swal from 'sweetalert2';  // 如果使用模块化

// function showAlert(message) {
//   Swal.fire({
//     icon: 'error',
//     title: '网络错误',
//     text: message,
//   });
// }

// function hideAlert() {
//   // SweetAlert2 会自动关闭，这里不需要手动隐藏
// }

代码解释:

checkNetworkStatus(): 使用 navigator.onLine API 检查当前网络状态，返回 true 表示在线，false 表示离线。
handleNetworkStatusChange(): 处理网络状态变化的逻辑。如果离线，调用 showAlert() 显示提示信息；如果在线，调用 hideAlert() 隐藏提示信息，并可以执行其他逻辑（例如重新加载数据）。
showAlert(message): 显示网络断开的提示信息。这个例子中创建了一个简单的 div 元素并添加到页面顶部。你可以根据需要自定义样式和内容，或者使用更成熟的 UI 库（例如 SweetAlert2、Bootstrap 的 alerts 等）来创建更美观的提示。
hideAlert(): 隐藏网络断开的提示信息。
事件监听: 使用 window.addEventListener 监听 online 和 offline 事件，以便在网络状态变化时立即做出响应。
定期检查 (可选): 使用 setInterval 每隔一段时间检查一次网络状态，可以更及时地发现网络连接中断的情况，尤其是在 online 和 offline 事件不触发的情况下。
使用 SweetAlert2 (可选): 代码中注释部分展示了如何使用 SweetAlert2 来显示更友好的提示信息。你需要先安装并引入 SweetAlert2 库。