网页实现ping效果
网页 实现 效果 ping
2023-09-11 14:17:27 时间
<!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>
相关文章
- 启动网页服务器,http – 如何在golang中启动Web服务器在浏览器中打开页面?
- 查看网页源码的时候找不到数据绑定
- 【C#】对异步请求处理程序IHttpAsyncHandler的理解和分享一个易用性封装 【手记】走近科学之为什么明明实现了IEnumerable<T>的类型却不能调用LINQ扩展方法 【手记】手机网页弹出层后屏蔽底层的滑动响应 【手记】ASP.NET提示“未能创建类型”处理 【Web】一个非常简单的移动web消息框 【手记】解决EXCEL跑SQL遇“查询无法运行或数据库表无法打开...”
- 利用Bootstrap制作一个流行的网页
- 微信公众号 - 实现 H5 网页在微信内置浏览器中下载文件,可预览和下载 office 文件(doc / xls / ppt / pdf 等)适用于任何前端技术栈网站,兼容安卓和苹果系统!
- 从网页唤醒电脑WOL | 群晖 外网网页唤醒群晖、电脑WOL
- 利用canvas将网页元素生成图片并保存在本地
- C#WinForm应用程序实现自动填充网页上的用户名和密码并点击登录按钮【转载】
- 《众妙之门——网页排版设计制胜秘诀》——第3章 设置网页字体的5 项原则和方法3.1 系统地进行网页版式设计
- 《移动优先与响应式Web设计》一第1章 响应式网页
- 《HTML5 开发实例大全》——1.20 分组列表显示网页中的内容
- Python 教程之使用 Autoscraper 轻松实现 Python 网页抓取
- Spring Security中实现微信网页授权
- 网页内嵌入我的网页
- 一步一步搭建客服系统 (1) 3分钟实现网页版多人文本、视频聊天室 (含完整源码)
- 瀑布流网页的实现中遇到的问题和解决方法
- 网页中金额小数点后面和前面字体大小不一致的实现
- WEB前端大作业-个人资料展示响应式网页模板(HTML JS CSS)
- 浅析如何使用Vue + Xterm.js + SpringBoot + Websocket / Stomp + JSch 实现一个 web terminal 网页版的终端工具
- Java学习---网页编辑器FCKeditor使用详解
- MQTT调试助手实现与网页进行MQTT通信【向网页控制台发送消息】
- Web 基础之 SSH 框架访问网页返回 json 数据简单实现的整理
- 应用市场快速下载以及网页端调起APP页面研究与实现
- 从网页抓取数据的一般方法
- Grafana集成到自己的Web项目,通过搭建自己的实时数据监测与分析平台,把报表和图形展示集成到web项目进行整合开发,在网页上实现类似于Echarts的图形展示,构建领导驾驶舱大屏炫酷数据展示
- 前端 布局 网页居中