189 8069 5689

怎么用css实现监控网络连接状态的页面

这篇文章主要介绍怎么用css实现监控网络连接状态的页面,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

创新互联公司是一家专业提供侯马企业网站建设,专注与网站设计、成都网站制作、成都h5网站建设、小程序制作等业务。10年已为侯马众多企业、政府机构等服务。创新互联专业网络公司优惠进行中。

代码解读

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,#ccc5vh);

}

定义容器尺寸:

.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.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;

}

画出服务器的机箱:

.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个信号设置动画延时,延时的值用变量定义:

: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种效果。

定义在线状态主题:

constONLINE_THEME={

statusColor:'green',

secondSignalDelay:'0.2s',

thirdSignalDelay:'0.4s'

}

类似地,定义离线状态主题:

constOFFLINE_THEME={

statusColor:'orangered',

secondSignalDelay:'0s',

thirdSignalDelay:'0s'

}

创建一个函数,用于根据在线/离线状态显示不同的主题:

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()

现在,关掉wifi连接,然后刷新页面,页面会采用红色主题;再打开wifi连接,然后刷新页面,页面会采用绿色主题。

接下来把检测函数与系统事件绑定,当连接断开或重新连接时,页面会自动设置主题,不用手动刷新页面了:

window.addEventListener('online',detectOnlineStatus)

window.addEventListener('offline',detectOnlineStatus)

大功告成!

怎么用css实现监控网络连接状态的页面

以上是“怎么用css实现监控网络连接状态的页面”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


文章名称:怎么用css实现监控网络连接状态的页面
分享URL:http://cdxtjz.cn/article/geejsd.html

其他资讯