如何使用css实现监控网络连接状态的页面

1、如何使用css实现监控网络连接状态的页面源代码下载代码解读navigator.online属性用于猎取在线状态，再协作相应的大事触发，就可以开发一个在线检测工具了。囫囵过程分成两部分，先画出视觉效果，再检测在线/离线状态。定义dom，容器中包含客户端、信号和服务器：居中显示：bodymargin:0;height:100vh;display:flex;align-items:center;justify-content:center;在顶部增强一个横条，用于显示当前状态是在线还是离线，用绿色表示在线：:root-status-color:green;bodybackground:linear-

2、gradient(var(-status-color)5vh,ccc5vh);定义容器尺寸：.detectorwidth:40em;height:14em;font-size:10px;定义子元素（客户端、信号、服务器）的整体布局和主色：.detectordisplay:flex;justify-content:space-between;align-items:center;color:333;设置子元素（客户端、信号、服务器）和它们的伪元素的共有属性：.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;画出服务器的机箱：.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个信号设置动画延时，延时的值用变量定义：: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);至此，视觉效果已经完成，目前是在线状态的效果，在:root中一共定义了3个变量，顶部横条和信号是绿色，信号灯依次闪耀表示正在传输数据：:root-status-color:green;-second-signal-delay:0.2s;-third-signal-delay:0.4s;通过修改这3个变量的值，可以得到离线状态的视觉效果，顶部横条和信号变

8、为红色，信号灯一起闪耀表示线路不通：:root-status-color:orangered;-second-signal-delay:0s;-third-signal-delay:0s;接下来通过检测在线/离线状态，动态应用这2种效果。定义在线状态主题：constonline_theme=statuscolor:&39;green&39;,secondsignaldelay:&39;0.2s&39;,thirdsignaldelay:&39;0.4s&39;类似地，定义离线状态主题：constoffline_theme=statuscolor:

9、&39;orangered&39;,secondsignaldelay:&39;0s&39;,thirdsignaldelay:&39;0s&39;创建一个函数，用于按照在线/离线状态显示不同的主题：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()现在，关掉wifi衔接，然后刷新页面，页面会采纳红色主题；再打开wifi衔接，然后刷新页面，页面会采纳绿色主题。接下来把检测函数与系统大事绑定，当衔接断开或重新衔接时，页面会自动设置主题，不用手动刷新页面了：win