如何使用css實現(xiàn)監(jiān)控網(wǎng)絡(luò)連接狀態(tài)的頁面

1、如何使用css實現(xiàn)監(jiān)控網(wǎng)絡(luò)連接狀態(tài)的頁面源代碼下載代碼解讀navigator.online屬性用于獵取在線狀態(tài)，再協(xié)作相應(yīng)的大事觸發(fā)，就可以開發(fā)一個在線檢測工具了。囫圇過程分成兩部分，先畫出視覺效果，再檢測在線/離線狀態(tài)。定義dom，容器中包含客戶端、信號和服務(wù)器：居中顯示：bodymargin:0;height:100vh;display:flex;align-items:center;justify-content:center;在頂部增強一個橫條，用于顯示當(dāng)前狀態(tài)是在線還是離線，用綠色表示在線：:root-status-color:green;bodybackground:linear-

2、gradient(var(-status-color)5vh,ccc5vh);定義容器尺寸：.detectorwidth:40em;height:14em;font-size:10px;定義子元素（客戶端、信號、服務(wù)器）的整體布局和主色：.detectordisplay:flex;justify-content:space-between;align-items:center;color:333;設(shè)置子元素（客戶端、信號、服務(wù)器）和它們的偽元素的共有屬性：.detector>*position:relative;box-sizing:border-box;.detector>*:b

3、efore,.detector>*:aftercontent:&39;&39;position:absolute;box-sizing:border-box;畫出客戶端的顯示器：.clientwidth:17em;height:10em;border:0.5emsolid;border-radius:0.5em;用偽元素畫出顯示器的底座：.clientdisplay:flex;flex-direction:column;align-items:center;margin-top:-4em;.client:beforewidth:1.5em;height:3em;backg

4、round-color:currentcolor;top:9.5em;.client:afterwidth:5em;height:1em;background-color:currentcolor;border-radius:0.3em;top:12.5em;畫出服務(wù)器的機箱：.serverwidth:7em;height:14em;border:0.5emsolid;border-radius:0.5em;用偽元素畫出硬盤，留意此處陰影的使用，用陰影畫出了其次塊硬盤：.server:beforewidth:5em;height:1em;background-color:currentcolo

5、r;border-radius:0.2em;top:8em;left:0.5em;box-shadow:01.5em0;用偽元素畫出按鈕，和上面陰影同樣的使用，這次用陰影畫出了其次個按鈕：.server:afterwidth:0.6em;height:0.6em;background-color:currentcolor;border-radius:50%;right:1.5em;bottom:0.5em;box-shadow:1em000.1em;畫出信號，注重配色用的是代表在線/離線的色彩，目前是綠色：.signal,.signal:before,.signal:afterwidth:1e

6、m;height:1em;background-color:var(-status-color);border-radius:50%;.signal:beforeright:2.5em;.signal:afterleft:2.5em;給信號增強動畫效果：.signal,.signal:before,.signal:afteranimation:blink0.6sinfinite;keyframesblink50%filter:opacity(0.1);為第2個信號和第3個信號設(shè)置動畫延時，延時的值用變量定義：:root-second-signal-delay:0.2s;-third-signa

7、l-delay:0.4s;.signal:beforeanimation-delay:var(-second-signal-delay);.signal:afteranimation-delay:var(-third-signal-delay);至此，視覺效果已經(jīng)完成，目前是在線狀態(tài)的效果，在:root中一共定義了3個變量，頂部橫條和信號是綠色，信號燈依次閃耀表示正在傳輸數(shù)據(jù)：:root-status-color:green;-second-signal-delay:0.2s;-third-signal-delay:0.4s;通過修改這3個變量的值，可以得到離線狀態(tài)的視覺效果，頂部橫條和信號變

8、為紅色，信號燈一起閃耀表示線路不通：:root-status-color:orangered;-second-signal-delay:0s;-third-signal-delay:0s;接下來通過檢測在線/離線狀態(tài)，動態(tài)應(yīng)用這2種效果。定義在線狀態(tài)主題：constonline_theme=statuscolor:&39;green&39;,secondsignaldelay:&39;0.2s&39;,thirdsignaldelay:&39;0.4s&39;類似地，定義離線狀態(tài)主題：constoffline_theme=statuscolor:

9、&39;orangered&39;,secondsignaldelay:&39;0s&39;,thirdsignaldelay:&39;0s&39;創(chuàng)建一個函數(shù)，用于按照在線/離線狀態(tài)顯示不同的主題：functiondetectonlinestatus()lettheme=navigator.online?online_theme:offline_themeletroot=document.documentelementroot.style.setproperty(&39;-status-color&39;,theme.statu

10、scolor)root.style.setproperty(&39;-second-signal-delay&39;,theme.secondsignaldelay)root.style.setproperty(&39;-third-signal-delay&39;,theme.thirdsignaldelay)detectonlinestatus()現(xiàn)在，關(guān)掉wifi銜接，然后刷新頁面，頁面會采納紅色主題；再打開wifi銜接，然后刷新頁面，頁面會采納綠色主題。接下來把檢測函數(shù)與系統(tǒng)大事綁定，當(dāng)銜接斷開或重新銜接時，頁面會自動設(shè)置主題，不用手動刷新頁面了：win