摘要:定義在線狀態主題類似地,定義離線狀態主題創建一個函數,用于根據在線離線狀態顯示不同的主題現在,關掉連接,然后刷新頁面,頁面會采用紅色主題再打開連接,然后刷新頁面,頁面會采用綠色主題。
效果預覽
按下右側的“點擊預覽”按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。
https://codepen.io/comehope/pen/oPjWvw
可交互視頻此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。
請用 chrome, safari, edge 打開觀看。
https://scrimba.com/p/pEgDAM/ceNm8CW
源代碼下載每日前端實戰系列的全部源代碼請從 github 下載:
https://github.com/comehope/front-end-daily-challenges
代碼解讀navigator.onLine 屬性用于獲取在線狀態,再配合相應的事件觸發,就可以開發一個在線檢測工具了。整個過程分成兩部分,先畫出視覺效果,再檢測在線/離線狀態。
定義 dom,容器中包含客戶端、信號和服務器:
居中顯示:
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; }
在頂部增加一個橫條,用于顯示當前狀態是在線還是離線,用綠色表示在線:
:root { --status-color: green; } body { background: linear-gradient(var(--status-color) 5vh, #ccc 5vh); }
定義容器尺寸:
.detector { width: 40em; height: 14em; font-size: 10px; }
定義子元素(客戶端、信號、服務器)的整體布局和主色:
.detector { display: flex; justify-content: space-between; align-items: center; color: #333; }
設置子元素(客戶端、信號、服務器)和它們的偽元素的共有屬性:
.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.5em solid; 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; }
畫出服務器的機箱:
.server { width: 7em; height: 14em; border: 0.5em solid; border-radius: 0.5em; }
用偽元素畫出硬盤,留意此處陰影的用法,用陰影畫出了第二塊硬盤:
.server::before { width: 5em; height: 1em; background-color: currentColor; border-radius: 0.2em; top: 8em; left: 0.5em; box-shadow: 0 1.5em 0; }
用偽元素畫出按鈕,和上面陰影同樣的用法,這次用陰影畫出了第二個按鈕:
.server::after { width: 0.6em; height: 0.6em; background-color: currentColor; border-radius: 50%; right: 1.5em; bottom: 0.5em; box-shadow: 1em 0 0 0.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: blink 0.6s infinite; } @keyframes blink { 50% { filter: opacity(0.1); } }
為第 2 個信號和第 3 個信號設置動畫延時,延時的值用變量定義:
: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); }
至此,視覺效果已經完成,目前是在線狀態的效果,在 :root 中一共定義了 3 個變量,頂部橫條和信號是綠色,信號燈依次閃爍表示正在傳輸數據:
:root { --status-color: green; --second-signal-delay: 0.2s; --third-signal-delay: 0.4s; }
通過修改這 3 個變量的值,可以得到離線狀態的視覺效果,頂部橫條和信號變為紅色,信號燈一起閃爍表示線路不通:
:root { --status-color: orangered; --second-signal-delay: 0s; --third-signal-delay: 0s; }
接下來通過檢測在線/離線狀態,動態應用這 2 種效果。
定義在線狀態主題:
const ONLINE_THEME = { statusColor: "green", secondSignalDelay: "0.2s", thirdSignalDelay: "0.4s" }
類似地,定義離線狀態主題:
const OFFLINE_THEME = { statusColor: "orangered", secondSignalDelay: "0s", thirdSignalDelay: "0s" }
創建一個函數,用于根據在線/離線狀態顯示不同的主題:
function detectOnlineStatus() { let theme = navigator.onLine ? ONLINE_THEME : OFFLINE_THEME let root = 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()
現在,關掉 wifi 連接,然后刷新頁面,頁面會采用紅色主題;再打開 wifi 連接,然后刷新頁面,頁面會采用綠色主題。
接下來把檢測函數與系統事件綁定,當連接斷開或重新連接時,頁面會自動設置主題,不用手動刷新頁面了:
window.addEventListener("online", detectOnlineStatus) window.addEventListener("offline", detectOnlineStatus)
大功告成!
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/96973.html
摘要:定義在線狀態主題類似地,定義離線狀態主題創建一個函數,用于根據在線離線狀態顯示不同的主題現在,關掉連接,然后刷新頁面,頁面會采用紅色主題再打開連接,然后刷新頁面,頁面會采用綠色主題。 showImg(https://segmentfault.com/img/bVbfQmV?w=400&h=305); 效果預覽 按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。 https...
摘要:源代碼下載每日前端實戰系列的全部源代碼請從下載代碼解讀定義,包含個元素,分別代表控件開關和燈光居中顯示定義控件的樣式,把控件的設置為透明,使其不可見,但仍可與用戶交互。 showImg(https://segmentfault.com/img/bVbhwqh?w=400&h=301); 效果預覽 按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。 https://code...
摘要:源代碼下載每日前端實戰系列的全部源代碼請從下載代碼解讀定義,包含個元素,分別代表控件開關和燈光居中顯示定義控件的樣式,把控件的設置為透明,使其不可見,但仍可與用戶交互。 showImg(https://segmentfault.com/img/bVbhwqh?w=400&h=301); 效果預覽 按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。 https://code...
閱讀 1958·2021-11-22 15:33
閱讀 3001·2021-11-18 10:02
閱讀 2603·2021-11-08 13:16
閱讀 1617·2021-10-09 09:57
閱讀 1366·2021-09-30 09:47
閱讀 2001·2019-08-29 13:05
閱讀 3064·2019-08-29 12:46
閱讀 1004·2019-08-29 12:19