网页实现ping效果
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网络实时状态</title>
<style>
.signal {
height: 30px;
width: 50px;
display: flex;
align-items: flex-end;
justify-content: space-between;
} .signal>div {
background-color: gainsboro;
width: 22%;
} .signal>div:nth-of-type(1) { height: 20%;
} .signal>div:nth-of-type(2) {
height: 46%;
} .signal>div:nth-of-type(3) {
height: 72%;
} .signal>div:nth-of-type(4) {
position: relative;
height: 100%;
} .signal .noSignal {
position: absolute;
bottom: 0;
right: -10;
padding: 0 4px;
color: red;
display: none;
}
.cmd{
width: 800px;
height: 300px;
background-color: black;
color: white;
overflow-y: auto;
padding-bottom:4px ;
}
</style>
</head> <body>
<div class="box">
<div class="signal">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item">
<div class="noSignal">x</div>
</div>
</div>
<div class="detail"></div>
<div class="cmd">http实现ping工具：</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.27.0/moment.min.js"></script>
<script>
// -----------------ping.js开始-------------------------------------
/**
* Creates and loads an image element by url.
* @param {String} url
* @return {Promise} promise that resolves to an image element or
* fails to an Error.
*/
function request_image(url) {
return new Promise(function (resolve, reject) {
var img = new Image();
img.onload = function () { resolve(img); };
img.onerror = function () { reject(url); };
img.src = url + '?random-no-cache=' + Math.floor((1 + Math.random()) * 0x10000).toString(16);
});
} /**
* Pings a url.
* @param {String} url
* @param {Number} multiplier - optional, factor to adjust the ping by. 0.3 works well for HTTP servers.
* @return {Promise} promise that resolves to a ping (ms, float).
*/
function ping(url, multiplier) {
return new Promise(function (resolve, reject) {
var start = (new Date()).getTime();
var response = function () {
var delta = ((new Date()).getTime() - start);
delta *= (multiplier || 1);
resolve(delta);
};
request_image(url).then(response).catch(response); // Set a timeout for max-pings, 5s.
setTimeout(function () { reject(Error('Timeout')); }, 5000);
});
}
// -----------------ping.js结束------------------------------------- let cmdHtml = '';
function setSignalTip(url) {
ping(url).then(function (delta) { if (navigator.onLine) {
const renderSgAc = (num) => {
const signalEl = document.querySelector('.signal');
signalEl.querySelectorAll('.item').forEach((item) => {
item.style.backgroundColor = 'gainsboro';
})
for (let i = 0; i < num; i++) {
signalEl.querySelectorAll('.item')[i].style.backgroundColor = 'green';
}
}
if (delta > 400) { // 网络延迟
renderSgAc(1)
} else if (delta > 300 && delta < 400) {// 网络不好
renderSgAc(2)
} else if (delta > 200 && delta <= 300) { // 网络一般
renderSgAc(3)
} else if (delta <= 200) { // 网络优秀
renderSgAc(4)
}
document.querySelector('.detail').innerHTML = `<div>
<div>网络延迟：${delta}毫秒</div>
</div>`
document.querySelector('.noSignal').style.display = 'none' const urlObj = new URL(url);
const cmdEl = document.querySelector('.cmd');
cmdHtml = cmdEl.innerHTML+`<div>
来自 ${urlObj.host} 的回复:
<span style="width:90px; display:inline-block">耗时=${delta} </span>
<span>请求时间=${moment().format('YYYY-MM-DD HH:mm:ss')}</span>
</div>`;
cmdEl.innerHTML = cmdHtml;
cmdEl.scrollTop = cmdEl.scrollHeight;
} else {
const signalEl = document.querySelector('.signal');
signalEl.querySelectorAll('.item').forEach((item) => {
item.style.backgroundColor = 'gainsboro';
})
document.querySelector('.detail').innerHTML = `<div>
<div>网络延迟：err毫秒</div>
<div>网络错误</div>
</div>`
document.querySelector('.noSignal').style.display = 'block'
}
}).catch(function (err) {
const signalEl = document.querySelector('.signal');
signalEl.querySelectorAll('.item').forEach((item) => {
item.style.backgroundColor = 'gainsboro';
})
document.querySelector('.detail').innerHTML = `<div>
<div>网络延迟：err毫秒</div>
<div>网络错误</div>
</div>`
document.querySelector('.noSignal').style.display = 'block'
}); }
setSignalTip('http://www.dshvv.com/w.png')
setInterval(() => {
setSignalTip('http://www.dshvv.com/w.png')
}, 1000)
</script>
</body> </html>
网页实现ping效果的更多相关文章
- HTML+CSS技术实现网页滑动门效果
一.什么是滑动门 大家在网页中经常会见到这样一种导航效果,因为使用频率广泛,所以广大的程序员给它起了一个名字,叫做滑动门.在学习滑动门之前,首先你要了解什么是滑动门. 小米官网,网页滑动门效果 二.实 ...
- js写的数码时钟，在“最小化”浏览器 或者 “切换网页”是动画效果好像不对
一.问题 在“最小化”浏览器 或者 “切换网页”是动画效果不对,不知道哪里出了问题???是不是”最小化“时网页定时器关掉了,还是其他什么原因啊 ???? 二.HTML代码如下 <div id=& ...
- 移动端页面 弹出框滚动，底部body锁定，不滚动 / 微信网页禁止回弹效果
需求:页面有弹出层菜单,当弹出层菜单超出屏幕可视区域时,不能滚动.加上滚动后,底部body的滚动事件如何禁止,加上了overflow:hidden;还是不可用. 如下图:地区弹出框可以滚动,而底部的b ...
- 用FireFox火狐浏览器的3D Tilt 插件查看网页3D视图效果
逛博客发现了网页的3D视图效果,一搜原来是Firefox特有的一个功能,先看效果: 相当炫酷,接下来介绍如何实现. 1.首先安装3d tilt 插件: 从火狐浏览器的添加插件页面,搜索:3D Tilt ...
- 多种方法实现H5网页图片动画效果；
在web开发中,GIF动画效果是随处可见,比如常见的loading加载.人物奔跑的gif图片等等,那么这些都是怎么实现的呢?其实实现的原理很简单,简而言之,这些所谓的动画都是一帧一帧的图片经过一段时间 ...
- JavaScript实现网页回到顶部效果
在浏览网页时,当我们浏览到网页底部,想要立刻回到网页顶部时,这时候一般网页会提供一个回到顶部的按钮来提升用户体验,以下代码实现了该功能 HTML代码: <p id="back-top& ...
- js实现网页回弹小球效果
直接上效果图 运行页面会首先弹出一个输入框,询问用户想要产生的小球数量,随后后台就会产生指定数量的小球,在页面中来回跳动,触碰到页面边框时,就会回弹,且产生的小球颜色随机,小球在页面中的位置随机,小球 ...
- JS-制作网页特效——选项卡效果（水平，点击）
//总结:这个样式的思维很重要,以前刚开始做,想的都是,怎么获取到自己点击的是哪一个li,然后给他以对应的div样式.后来发现难点是,怎么找到另外两个没有被点击的li和他们对应的div.把他们的样式去 ...
- javascript 网页运行代码效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- Javascript禁止网页复制粘贴效果，或者复制时自动添加来源信息
一.禁止复制 使用方法:在oncopy事件中return false oncopy="return false;" 1.禁止复制网页内容 <body oncopy=" ...
随机推荐
- MySQL 中使用索引一定有效吗？如何排查索引效果？
MySQL 中使用索引一定有效吗?如何排查索引效果? 虽然索引是提升 MySQL 查询性能的常见手段,但并不是所有情况下索引都会有效.索引的使用取决于查询条件.数据分布.索引设计等多个因素.如果索引未 ...
- Linux设置每晚定时备份Oracle数据表
先新建目录 该路径:/home/oracle/backup 该名称:DATA_PATH shell脚本 export ORACLE_BASE=/home/oracle/app export ORACL ...
- Python3工具_C段扫描工具_主机存活探测初始
之前搞了多线程 然后基于多线程写了个C段主机存活探测工具 扫描主函数 def sub(): global num num=0 while not q.empty(): threadLock.acqui ...
- 一行代码搞定防抖节流：JavaScript新特性解析
防抖(Debounce)和节流(Throttle)是两种前端开发中常用的性能优化技术,尤其在处理高频触发事件如滚动.调整窗口大小.输入等场景中.传统实现这些功能需要编写复杂的函数,但随着JavaScr ...
- 进程的退出--exit()与_exit()的区别
进程终止:①异常终止:②正常终止 异常终止:①进程收到某种信号: ②调用abort()函数:[堕胎] 正常终止:①main()函数返回 ②调用exit()函数 三.调用_exit()函数或_Exit( ...
- 【笔记】用伽马函数证明标准正态分布EX4的值为3
2020-11-13 看了博客标准正态分布的E(X^4)积分求解的极坐标变换证明方法,已经叹服不已,然后看了底下老哥的评论,用伽马函数可以口算出来,遂去查了一下,真香!发篇博客记录一下. 现在的问题, ...
- LocalDateTime时间工具之“2023-01-18T23:59:59.999999999”转“yyyy-MM-dd HH:mm:ss”
LocalDateTime时间工具之"2023-01-18T23:59:59.999999999"转"yyyy-MM-dd HH:mm:ss" 代码 Local ...
- Linux系列：聊一聊 SystemV 下的进程间共享内存
一:背景 1. 讲故事 昨天在分析一个 linux 的 dump 时,看到了这么一话警告,参考如下: 0:000> !eeheap -gc *** WARNING: Unable to veri ...
- JavaScript编程实践：打造优雅健壮的代码
@charset "UTF-8"; .markdown-body { line-height: 1.75; font-weight: 400; font-size: 15px; o ...
- WebAssembly在实际应用中的案例探究
@charset "UTF-8"; .markdown-body { line-height: 1.75; font-weight: 400; font-size: 15px; o ...