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

這篇文章主要介紹怎么用css實(shí)現(xiàn)監(jiān)控網(wǎng)絡(luò)連接狀態(tài)的頁面，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

　　代碼解讀

　　navigator.onLine屬性用于獲取在線狀態(tài)，再配合相應(yīng)的事件觸發(fā)，就可以開發(fā)一個在線檢測工具了。整個過程分成兩部分，先畫出視覺效果，再檢測在線/離線狀態(tài)。

　　定義dom，容器中包含客戶端、信號和服務(wù)器：

　　<divclass="detector">

　　<divclass="client"></div>

　　<divclass="signal"></div>

　　<divclass="server"></div>

　　</div>

　　居中顯示：

　　body{

　　margin:0;

　　height:100vh;

　　display:flex;

　　align-items:center;

　　justify-content:center;

　　}

　　在頂部增加一個橫條，用于顯示當(dāng)前狀態(tài)是在線還是離線，用綠色表示在線：

　　:root{

　　--status-color:green;

　　}

　　body{

　　background:linear-gradient(var(--status-color)5vh,#ccc5vh);

　　}

　　定義容器尺寸：

　　.detector{

　　width:40em;

　　height:14em;

　　font-size:10px;

　　}

　　定義子元素（客戶端、信號、服務(wù)器）的整體布局和主色：

　　.detector{

　　display:flex;

　　justify-content:space-between;

　　align-items:center;

　　color:#333;

　　}

　　設(shè)置子元素（客戶端、信號、服務(wù)器）和它們的偽元素的共有屬性：

　　.detector>*{

　　position:relative;

　　box-sizing:border-box;

　　}

　　.detector>*::before,

　　.detector>*::after{

　　content:'';

　　position:absolute;

　　box-sizing:border-box;

　　}

　　畫出客戶端的顯示器：

　　.client{

　　width:17em;

　　height:10em;

　　border:0.5emsolid;

　　border-radius:0.5em;

　　}

　　用偽元素畫出顯示器的底座：

　　.client{

　　display:flex;

　　flex-direction:column;

　　align-items:center;

　　margin-top:-4em;

　　}

　　.client::before{

　　width:1.5em;

　　height:3em;

　　background-color:currentColor;

　　top:9.5em;

　　}

　　.client::after{

　　width:5em;

　　height:1em;

　　background-color:currentColor;

　　border-radius:0.3em;

　　top:12.5em;

　　}

　　畫出服務(wù)器的機(jī)箱：

　　.server{

　　width:7em;

　　height:14em;

　　border:0.5emsolid;

　　border-radius:0.5em;

　　}

　　用偽元素畫出硬盤，留意此處陰影的用法，用陰影畫出了第二塊硬盤：

　　.server::before{

　　width:5em;

　　height:1em;

　　background-color:currentColor;

　　border-radius:0.2em;

　　top:8em;

　　left:0.5em;

　　box-shadow:01.5em0;

　　}

　　用偽元素畫出按鈕，和上面陰影同樣的用法，這次用陰影畫出了第二個按鈕：

　　.server::after{

　　width: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::after{

　　width:1em;

　　height:1em;

　　background-color:var(--status-color);

　　border-radius:50%;

　　}

　　.signal::before{

　　right:2.5em;

　　}

　　.signal::after{

　　left:2.5em;

　　}

　　給信號增加動畫效果：

　　.signal,

　　.signal::before,

　　.signal::after{

　　animation:blink0.6sinfinite;

　　}

　　@keyframesblink{

　　50%{

　　filter:opacity(0.1);

　　}

　　}

　　為第2個信號和第3個信號設(shè)置動畫延時，延時的值用變量定義：

　　:root{

　　--second-signal-delay:0.2s;

　　--third-signal-delay:0.4s;

　　}

　　.signal::before{

　　animation-delay:var(--second-signal-delay);

　　}

　　.signal::after{

　　animation-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)的視覺效果，頂部橫條和信號變?yōu)榧t色，信號燈一起閃爍表示線路不通：

　　:root{

　　--status-color:orangered;

　　--second-signal-delay:0s;

　　--third-signal-delay:0s;

　　}

　　接下來通過檢測在線/離線狀態(tài)，動態(tài)應(yīng)用這2種效果。

　　定義在線狀態(tài)主題：

　　constONLINE_THEME={

　　statusColor:'green',

　　secondSignalDelay:'0.2s',

　　thirdSignalDelay:'0.4s'

　　}

　　類似地，定義離線狀態(tài)主題：

　　constOFFLINE_THEME={

　　statusColor:'orangered',

　　secondSignalDelay:'0s',

　　thirdSignalDelay:'0s'

　　}

　　創(chuàng)建一個函數(shù)，用于根據(jù)在線/離線狀態(tài)顯示不同的主題：

　　functiondetectOnlineStatus(){

　　lettheme=navigator.onLine?ONLINE_THEME:OFFLINE_THEME

　　letroot=document.documentElement

　　root.style.setProperty('--status-color',theme.statusColor)

　　root.style.setProperty('--second-signal-delay',theme.secondSignalDelay)

　　root.style.setProperty('--third-signal-delay',theme.thirdSignalDelay)

　　}

　　detectOnlineStatus()

　　現(xiàn)在，關(guān)掉wifi連接，然后刷新頁面，頁面會采用紅色主題；再打開wifi連接，然后刷新頁面，頁面會采用綠色主題。

　　接下來把檢測函數(shù)與系統(tǒng)事件綁定，當(dāng)連接斷開或重新連接時，頁面會自動設(shè)置主題，不用手動刷新頁面了：

　　window.addEventListener('online',detectOnlineStatus)

　　window.addEventListener('offline',detectOnlineStatus)

　　大功告成！

以上是“怎么用css實(shí)現(xiàn)監(jiān)控網(wǎng)絡(luò)連接狀態(tài)的頁面”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！