使用JavaScript Ping IP地址，通显示绿，不通显示为红

会开车的蛤蟆

于 2023-05-15 18:32:49 发布

阅读量947

点赞数

分类专栏： java 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/VBMXJDBH/article/details/130690230

版权

java 专栏收录该内容

7 篇文章 3 订阅

订阅专栏

该文展示了一个简单的HTML页面，用于创建一个监控界面，显示网络状态。通过CSS3定义了各个部分的样式，如背景色和边框。JavaScript中的ping函数用于检查IP地址的可达性，根据响应情况改变元素背景色以表示网络是否通畅。

摘要由CSDN通过智能技术生成


<!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进行循环遍历进行批量处理；当然还有其他方法，需求不一样，但想要的效果很类似，目的就是看它通不通

会开车的蛤蟆

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用JavaScript Ping IP地址，通显示绿，不通显示为红

代码实现挺简单的吧，但是拿到这个需求之后，没有任何思路；而且JavaScript这段代码也不是很复杂，简单的判断而已，只是没有思路；如果IP不止一个，则用for和list进行循环遍历进行批量处理；当然还有其他方法，需求不一样，但想要的效果很类似，目的就是看它通不通。IP能ping通的情况下显示为绿色，不通的情况下显示为红色。再给JavaScript。
复制链接

扫一扫