css如何实现监控网络连接状态的页面-创新互联
本篇文章为大家展示了css如何实现监控网络连接状态的页面,代码简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
在思茅等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供成都做网站、成都网站设计 网站设计制作定制网站,公司网站建设,企业网站建设,品牌网站设计,成都全网营销,成都外贸网站建设公司,思茅网站建设费用合理。效果预览
源代码下载
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)
上述内容就是css如何实现监控网络连接状态的页面,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联成都网站设计公司行业资讯频道。
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
当前题目:css如何实现监控网络连接状态的页面-创新互联
网站链接:http://myzitong.com/article/josee.html