网页实现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中直接存储图片.音频.视频等大容量内容(通常称为BLOB数据)通常不被推荐,主要原因包括以下几点: 1. 性能问题 存储效率:存储大容量文件(如图片.音频.视频等)会大幅增加数据库的存储负 ...
- jmeter使用之数据关联
- [笔记]这些超级好用的html标签和css属性
1.sup.sub 上标.下标,直接看下面的例子吧 A<sub>2</sub> 4<sup>2</sup> 42 A2 2.伪类属性的love hate ...
- 勒索病毒分析-2024wdb-re2
检查相关信息 可以看到病毒存在VMProtect虚拟壳 简单脱壳 首先我在x64debug中运行一次,发现没有中断退出,证明大概率没有反调试,但是有crc检测,所以尽量不下int3断点(脱壳时). 一 ...
- eclipse中那些难以分辨的符号、Java中的Long和mysql中的bigint
这是一个字符串 从左到右依次是数字"0", 大写字母"O",小写字母"o",数字"1",小写字母"l(艾欧)& ...
- 【翻译】Processing系列｜（二）安卓模式的安装使用及打包发布
上一篇:[翻译]Processing系列|(一)简介及使用方法 下一篇:[翻译] Processing系列|(三)安卓项目构建 我的目的是在学习完成之后写出一个安卓程序,所以第二篇就是Processi ...
- ISO镜像做yum源
先上传一个镜像文件 centos-7-x86-1708.iso 挂载 mount -o loop /root/centos-7-x86-1708.iso /file 设置开机自动挂载 vi /etc/ ...
- STL vector容器存储键值对
在阅读tvm源码时,发现了一个挺有意思的代码: std::vector<std::pair<std::string, ObjectRef>> update; vector容器里 ...
- codeup之沙漏图形
Description 问题:输入n,输出正倒n层星号三角形.首行顶格,星号间有一空格,效果见样例 输入样例: 3 输出样例: * * * * * * * * * * * 数据规模 1<= n ...
- My Calendar III——LeetCode⑪
//原题链接https://leetcode.com/problems/my-calendar-iii/submissions/ 题目描述 Implement a MyCalendarThree cl ...