使用JavaScript Ping IP地址，通显示绿，不通显示为红
<!DOCTYPE html><html><head>
<meta charset="UTF-8">
<title>监控界面</title> <!-- 导入必要的CSS和JS文件 -->
<link rel="stylesheet" href="test.css">
<script src="test.js"></script>
<!-- 自定义CSS -->
<style> /* 可以在这里定义自己的CSS样式 */ </style>
</head><body>
<div class="container">
<h1>I R S 数 据 看 板</h1> <!-- 插入监控数据 -->
<div class="table-striped" id="D1">
<p id="W1">网络状态</p>
<div id="StatusNS0">T0</div>
<div id="StatusNS1">T1</div>
<div id="StatusNS2">T2</div>
<div id="StatusDP1">C1</div>
<div id="StatusDP2">C2</div>
<div id="StatusDP3">C3</div>
<div id="StatusDX">DX</div>
</div>
<div class="W2" id="D2">
</div>
</div>
</body>
</html>
再给点CSS3样式
body{
height: auto;
border: 1px solid green;
width: 99%;
background-color: #DCDCDC;
}
h1{
text-align: center;
}
#D1{
background-color: #E6E6FA;
border: 1px solid green;
width: 5%;
}
#W1{
text-align: center;
}
.classA{background-color: #CCCCCC;}
#StatusNS0{text-align:center;
width: 97%;
height: 50px;
border: 1px solid green;
border-style:solid;
border-width:1px;}
#StatusNS1{text-align:center;
width: 97%;
height: 50px;
border: 1px solid green;
border-style:solid;
border-width:1px;}
#StatusNS2{text-align:center;
width: 97%;
height: 50px;
border: 1px solid green;
border-style:solid;
border-width:1px;}
#StatusDP1{text-align:center;
width: 97%;
height: 50px;
border: 1px solid green;
border-style:solid;
border-width:1px;}
#StatusDP2{text-align:center;
width: 97%;
height: 50px;
border: 1px solid green;
border-style:solid;
border-width:1px;}
#StatusDP3{text-align:center;
width: 97%;
height: 50px;
border: 1px solid green;
border-style:solid;
border-width:1px;}
#StatusDX{text-align:center;
width: 97%;
height: 50px;
border: 1px solid green;
border-style:solid;
border-width:1px;}
再给JavaScript
function ping(T0ip){
var img = new Image();
var start = new Date().getTime();
img.src = "http://" + T0ip + "?t=" + start;
var flag = false; //无法访问
img.onload = function(){
flag = true;
document.getElementById("StatusNS0").style.backgroundColor="green"
};
img.onerror = function(){
flag = true;
document.getElementById("StatusNS0").style.backgroundColor="green"//网络通则为绿色
};
var timer = setTimeout(function(){
if(!flag){ //如果真的无法访问
flag = false;
document.getElementById("StatusNS0").style. backgroundColor="red"//网络不通则为红色
}
},1500);
}
ping(127.0.0.1)
运行效果：
IP能ping通的情况下显示为绿色，不通的情况下显示为红色
代码实现挺简单的吧，但是拿到这个需求之后，没有任何思路；而且JavaScript这段代码也不是很复杂，简单的判断而已，只是没有思路；思路真的很重要；
如果IP不止一个，则用for和list进行循环遍历进行批量处理；当然还有其他方法，需求不一样，但想要的效果很类似，目的就是看它通不通