<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Example-网络检测</title>
<style type="text/css">
.main {
margin-left:200px;
}
h2 {
font-size: 20px;
}
.detect-area {
font-size: 13px;
}
.detect-area li {
line-height: 30px;
}
.detect-area span {
margin-left: 20px;
}
.detect-area .result-y {
color: green;
}
.detect-area .result-n {
color: red;
}
.btn-redetect {
text-decoration: none;
}
.btn-redetect:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="main">
<h2 class="title">检查项：</h2>
<ul class="detect-area">
<li class="d-ip">当前ip地址<span></span></li>
<li class="d-time">本地时间设置是否在证书有效期内<span></span></li>
<li class="d-net">网络连通性检测<span></span></li>
<li class="d-net-example">example.com网络连通性检测<span></span></li>
<li class="d-net-examplepage">examplepage.com网络连通性检测<span></span></li>
<li class="d-net-cdn">CDN网络连通性检测<span></span></li>
<li class="d-examplepage-speed">examplepage.com网速检测<span></span></li>
<li class="d-cdn-speed">CDN网速检测<span></span></li>
</ul>
<a class="btn-redetect" onclick="return false;" href="#">重新检测</a>
</div>
<script src="<https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js>"></script>
<script type="text/javascript">
(function(window, $){
//处理获取到的ip信息
window.getIP = function(){
if(window.returnCitySN) {
$('.d-ip').addClass('result-y');
$('.d-ip span').html(window.returnCitySN.cip);
} else {
$('.d-ip').addClass('result-n');
$('.d-ip span').html('[X]');
}
};
//检测IP地址
var detectIP = function(){
var head= $('head')[0],
script= document.createElement('script');
script.type= 'text/javascript';
script.onload = script.onerror = window.getIP;
script.src= '<https://pv.sohu.com/cityjson?ie=utf-8>';
head.appendChild(script);
};
//检测本地时间
var detectTime = function(){
var exampleStartTime = 1597885200000, //+ new Date('2018-07-20 17:30:39')
exampleEndTime = 1663635600000, //+ new Date('2020-08-19 20:00:00')
examplepageStartTime = 1551315600000, //+ new Date('2018-02-28 15:11:37')
examplepageEndTime = 1615338000000, //+ new Date('2019-03-10 07:59:59')
time = +new Date();
if((time>examplepageStartTime && time<examplepageEndTime) || (time>exampleStartTime && time<exampleEndTime)) {
$('.d-time').addClass('result-y');
$('.d-time span').html('[√]');
} else {
$('.d-time').addClass('result-n');
$('.d-time span').html('[X]');
}
};
//检测第三方大站连通性
var detectNet = function(){
var img = new Image();
img.onload = function(){
$('.d-net').addClass('result-y');
$('.d-net span').html('[√]');
};
img.onerror = function(){
$('.d-net').addClass('result-n');
$('.d-net span').html('[X]');
};
img.src = '<https://www.baidu.com/favicon.ico?_t=>' + (+new Date());
};
//检测example.com连通性
var detectNetExample = function(){
var img = new Image();
img.onload = function(){
$('.d-net-example').addClass('result-y');
$('.d-net-example span').html('[√]');
};
img.onerror = function(){
$('.d-net-example').addClass('result-n');
$('.d-net-example span').html('[X]');
};
img.src = '<https://www.example.com/detect/detect.gif?_t=>' + (+new Date());
};
//检测examplepage.com连通性
var detectNetExamplepage = function(){
var img = new Image();
img.onload = function(){
$('.d-net-examplepage').addClass('result-y');
$('.d-net-examplepage span').html('[√]');
};
img.onerror = function(){
$('.d-net-examplepage').addClass('result-n');
$('.d-net-examplepage span').html('[X]');
};
img.src = '<https://www.examplepage.com/detect/detect.gif?_t=>' + (+new Date());
};
//检测CDN连通性
var detectCDNExamplepage = function(){
var img = new Image();
img.onload = function(){
$('.d-net-cdn').addClass('result-y');
$('.d-net-cdn span').html('[√]');
};
img.onerror = function(){
$('.d-net-cdn').addClass('result-n');
$('.d-net-cdn span').html('[X]');
};
img.src = '<https://www.examplepage.com/detect/detect.gif?_t=>' + (+new Date());
};
//检测examplepage.com网速
var detectExamplepageSpeed = function(){
var img = new Image(),
startTime;
img.onload = function(){
var endTime = +new Date(),
period = (endTime-startTime)/1000,
speed = 748/period;
$('.d-examplepage-speed').addClass('result-y');
$('.d-examplepage-speed span').html(speed.toFixed(2) + 'KB/s');
};
img.onerror = function(){
$('.d-examplepage-speed').addClass('result-n');
$('.d-examplepage-speed span').html('[X]');
};
startTime = +new Date();
img.src = '<https://www.examplepage.com/detect/speed.png?_t=>' + (+new Date());
$('.d-examplepage-speed span').html('检测中...');
};
//检测CDN网速
var detectCDNSpeed = function(){
var img = new Image(),
startTime;
img.onload = function(){
var endTime = +new Date(),
period = (endTime-startTime)/1000,
speed = 748/period;
$('.d-cdn-speed').addClass('result-y');
$('.d-cdn-speed span').html(speed.toFixed(2) + 'KB/s');
};
img.onerror = function(){
$('.d-cdn-speed').addClass('result-n');
$('.d-cdn-speed span').html('[X]');
};
startTime = +new Date();
img.src = '<https://wwww.examplepage.com/detect/speed.png?_t=>' + (+new Date());
$('.d-cdn-speed span').html('检测中...');
};
//检测
var detect = function(){
detectIP();
detectTime();
detectNet();
detectNetExample();
detectNetExamplepage();
detectCDNExamplepage();
detectExamplepageSpeed();
detectCDNSpeed();
};
//清空检测结果
var clear = function(){
$('.detect-area li').removeClass('result-y result-n');
$('.detect-area li span').html('');
$('head script').remove();
};
//进入页面即检测
detect();
//绑定重新检测
$('.btn-redetect').on('click', function(){
clear();
detect();
});
})(window, jQuery);
</script>
</body>
</html>
Copy the code