<!DOCTYPE html>
<html lang="zh-TW">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <style>
      #status-bar {
        transition: opacity 0.5s ease-in-out; /*透明度由純透明變成100%之漸進式變化所花時間*/
        opacity: 0;        
      }
      
      .offlinewilly { /*offlinewilly標籤*/
  visibility: visible;
  
    position: absolute;
    top: 0%; /*制定所跳出之藍色大方塊的上方邊緣位置。倘若本列為0，則藍色大方塊的上方邊緣將貼緊瀏覽器上方邊緣。倘若本列為50%，則藍色大方塊的上方邊緣將位於瀏覽器垂直方向之正中間*/
    left: 50%;
    margin-top: 10px; /*位移所跳出之藍色大方塊的上下位置，負越多、則藍色大方塊越往上飄，但不影響所跳出之綠色與黃色方塊*/
    /*margin-left: -50px;*/ /*本列水平位移無作用*/
  
  width: 160px; /*刻意將本藍色彈跳視窗之寬度增大，當瀏覽器縮小時，則可將本藍色視窗超越瀏覽器，再藉由overflow-x: hidden;將水平scrollbar消失*/ /*\|/20250121B width為160px、margin-left則是其一半-80px*/
  height: 80px; /*彈跳視窗之高度*/ /*\|/20250121A要將height高度定很小.盡可能讓外框包覆文字、padding再撐開文字與框框間距++++預設文字大小為16px，若要使文字置中，height要比padding的頭一個值大16+16=32px，譬如height=80，padding的頭一個值=80-16x2=48px*/
  padding: 48px 0px 0px 0px; /*文字跟外框之間距*/ /*\|/20250121A要將height高度定很小.盡可能讓外框包覆文字、padding再撐開文字與框框間距++++預設文字大小為16px，若要使文字置中，height要比padding的頭一個值大16+16=32px，譬如height=80，padding的頭一個值=80-16-16=48px，其實也沒有那麼絕對，可大約用目測調整*/
  font-size: 16px; /*[斷網中]文字大小*/
  
  background-color: #00F; /*彈跳視窗之顏色*/
  color: #ff0; /*彈跳視窗之文字顏色*/
  text-align: center;  
  border-radius: 14px; /*彈跳視窗之四角的圓弧狀態，數值越小->彈跳視窗越呈現方形、數值越大->彈跳視窗越呈現圓形*/  
  margin-left: -80px; /*\|/20250121B width為160px、margin-left則是其一半-80px*/
      }
    </style>
  </head>
  <body>
    <div id="status-bar"></div> <!--\|/20250320A入_利用head中的CSS定義status-bar位於整個網頁的最上方++++利用javascript定義status-bar呈現的時機-->

監聽網路，只有在 offline 時才會出現一條bar，有網路時則無任何bar<br>

紅色:超過2秒沒網路時出現(一直出現)，有網路時紅色bar消失!

    <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) {
          statusBar.classList.remove("offlinewilly"); /*連上線時，移除offlinewilly標籤*/          
document.getElementById('status-bar').innerHTML= "";  /*連上線時，移除[斷網中]文字*/          
          return;
        }

        // Offline斷線的時候
/*斷線過程中，持續使紅線100%上色999999999999999999999999999999999999999999999999*/
        offlineTimer = setTimeout(() => {
          statusBar.classList.add("offlinewilly"); /*斷線時，加入offlinewilly標籤*/
          statusBar.style.opacity = "1"; /*透明度持續為1(紅線100%上色)*/
document.getElementById('status-bar').innerHTML= "斷網中";  /*斷線時，呈現[斷網中]文字*/        
        }, 2000); /*紅色:超過2秒沒網路時出現(一直出現)*/
/*斷線過程中，持續使紅線100%上色666666666666666666666666666666666666666666666666*/
      }

      window.addEventListener("online", updateOnlineStatus); /*時刻監測網頁狀態，若連上線時，則採取連上線的處置方式*/
      window.addEventListener("offline", updateOnlineStatus); /*時刻監測網頁狀態，若斷線時，則採取斷線的處置方式*/

      // 初始狀態檢查
      updateOnlineStatus();
    </script>
  </body>
</html>