<!DOCTYPE html>
<html lang="zh-TW">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>web-navigator-online</title>
    <style>
      #status-bar {
        position: fixed;
        top: 0; /*\|/20250320A出_top為零代表status-bar位於整個網頁的最上方*/
        left: 0;
        right: 0;
        height: 5px;
        transition: opacity 0.5s ease-in-out;
        opacity: 0;
      }
      .onlinewilly { /*onlinewilly標籤*/
        background-color: Green;
      }
      .offlinewilly { /*offlinewilly標籤*/
        background-color: Red;
      }
    </style>
  </head>
  <body>
    <div id="status-bar"></div> <!--\|/20250320A入_利用head中的CSS定義status-bar位於整個網頁的最上方++++利用javascript定義status-bar呈現的時機-->

監聽網路 online & offline 會出現一條bar<br>
綠色:有網路時出現(僅出現3秒)<br>
紅色:超過2秒沒網路時出現(一直出現)


    <script>
      const statusBar = document.getElementById("status-bar"); /*\|/20250320A出_利用javascript定義status-bar呈現的時機*/
      let onlineTimer;
      let offlineTimer;

      function updateOnlineStatus() {
        clearTimeout(offlineTimer);
        clearTimeout(onlineTimer);

        // Online連上網的時候
        if (navigator.onLine) {
/*連上線的初始狀態(綠線100%上色)999999999999999999999999999999999999999999999999*/
          statusBar.classList.remove("offlinewilly"); /*連上線時，移除offlinewilly標籤*/
          statusBar.classList.add("onlinewilly"); /*連上線時，加入onlinewilly標籤*/
          statusBar.style.opacity = "1"; /*\|/20250320B甲_起初，透明度為1(綠線100%上色)*/
/*連上線的初始狀態(綠線100%上色)666666666666666666666666666666666666666666666666*/
/*連上線後的第三秒鐘(綠線由100%上色變成透明)999999999999999999999999999999999999999999999999*/
          onlineTimer = setTimeout(() => {
            statusBar.style.opacity = "0";
          }, 3000); /*20250320B乙_第三秒時，透明度由1變成0(綠線消失不見)*/
/*連上線後的第三秒鐘(綠線由100%上色變成透明)666666666666666666666666666666666666666666666666*/
          return;
        }

        // Offline斷線的時候
/*斷線過程中，持續使紅線100%上色999999999999999999999999999999999999999999999999*/
        offlineTimer = setTimeout(() => {
          statusBar.classList.remove("onlinewilly"); /*斷線時，移除onlinewilly標籤*/
          statusBar.classList.add("offlinewilly"); /*斷線時，加入offlinewilly標籤*/
          statusBar.style.opacity = "1"; /*透明度持續為1(紅線100%上色)*/
        }, 2000);
/*斷線過程中，持續使紅線100%上色666666666666666666666666666666666666666666666666*/
      }

      window.addEventListener("online", updateOnlineStatus); /*時刻監測網頁狀態，若連上線時，則採取連上線的處置方式*/
      window.addEventListener("offline", updateOnlineStatus); /*時刻監測網頁狀態，若斷線時，則採取斷線的處置方式*/

      // 初始狀態檢查
      updateOnlineStatus();
    </script>
  </body>
</html>