1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>网络实时状态</title>
    8.     <style>
    9.         .signal {
    10.             height: 30px;
    11.             width: 50px;
    12.             display: flex;
    13.             align-items: flex-end;
    14.             justify-content: space-between;
    15.         }
    17.         .signal>div {
    18.             background-color: gainsboro;
    19.             width: 22%;
    20.         }
    22.         .signal>div:nth-of-type(1) {
    24.             height: 20%;
    25.         }
    27.         .signal>div:nth-of-type(2) {
    28.             height: 46%;
    29.         }
    31.         .signal>div:nth-of-type(3) {
    32.             height: 72%;
    33.         }
    35.         .signal>div:nth-of-type(4) {
    36.             position: relative;
    37.             height: 100%;
    38.         }
    40.         .signal .noSignal {
    41.             position: absolute;
    42.             bottom: 0;
    43.             right: -10;
    44.             padding: 0 4px;
    45.             color: red;
    46.             display: none;
    47.         }
    48.         .cmd{
    49.             width: 800px;
    50.             height: 300px;
    51.             background-color: black;
    52.             color: white;
    53.             overflow-y: auto;
    54.             padding-bottom:4px ;
    55.         }
    56.     </style>
    57. </head>
    59. <body>
    60.     <div class="box">
    61.         <div class="signal">
    62.             <div class="item"></div>
    63.             <div class="item"></div>
    64.             <div class="item"></div>
    65.             <div class="item">
    66.                 <div class="noSignal">x</div>
    67.             </div>
    68.         </div>
    69.         <div class="detail"></div>
    70.         <div class="cmd">http实现ping工具：</div>
    71.     </div>
    72.     <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.27.0/moment.min.js"></script>
    73.     <script>
    74.      // -----------------ping.js开始-------------------------------------
    75.         /**
    76.      * Creates and loads an image element by url.
    77.      * @param  {String} url
    78.      * @return {Promise} promise that resolves to an image element or
    79.      *                   fails to an Error.
    80.      */
    81.         function request_image(url) {
    82.             return new Promise(function (resolve, reject) {
    83.                 var img = new Image();
    84.                 img.onload = function () { resolve(img); };
    85.                 img.onerror = function () { reject(url); };
    86.                 img.src = url + '?random-no-cache=' + Math.floor((1 + Math.random()) * 0x10000).toString(16);
    87.             });
    88.         }
    90.         /**
    91.          * Pings a url.
    92.          * @param  {String} url
    93.          * @param  {Number} multiplier - optional, factor to adjust the ping by.  0.3 works well for HTTP servers.
    94.          * @return {Promise} promise that resolves to a ping (ms, float).
    95.          */
    96.         function ping(url, multiplier) {
    97.             return new Promise(function (resolve, reject) {
    98.                 var start = (new Date()).getTime();
    99.                 var response = function () {
    100.                     var delta = ((new Date()).getTime() - start);
    101.                     delta *= (multiplier || 1);
    102.                     resolve(delta);
    103.                 };
    104.                 request_image(url).then(response).catch(response);
    106.                 // Set a timeout for max-pings, 5s.
    107.                 setTimeout(function () { reject(Error('Timeout')); }, 5000);
    108.             });
    109.         }
    110.         // -----------------ping.js结束-------------------------------------
    112.         let cmdHtml = '';
    113.         function setSignalTip(url) {
    114.             ping(url).then(function (delta) {
    116.                 if (navigator.onLine) {
    117.                     const renderSgAc = (num) => {
    118.                         const signalEl = document.querySelector('.signal');
    119.                         signalEl.querySelectorAll('.item').forEach((item) => {
    120.                             item.style.backgroundColor = 'gainsboro';
    121.                         })
    122.                         for (let i = 0; i < num; i++) {
    123.                             signalEl.querySelectorAll('.item')[i].style.backgroundColor = 'green';
    124.                         }
    125.                     }
    126.                     if (delta > 400) { // 网络延迟
    127.                         renderSgAc(1)
    128.                     } else if (delta > 300 && delta < 400) {// 网络不好
    129.                         renderSgAc(2)
    130.                     } else if (delta > 200 && delta <= 300) { // 网络一般
    131.                         renderSgAc(3)
    132.                     } else if (delta <= 200) { // 网络优秀
    133.                         renderSgAc(4)
    134.                     }
    135.                     document.querySelector('.detail').innerHTML = `<div>
    136.                         <div>网络延迟：${delta}毫秒</div>
    137.                     </div>`
    138.                     document.querySelector('.noSignal').style.display = 'none'
    140.                     const urlObj = new URL(url);
    141.                     const cmdEl = document.querySelector('.cmd');
    142.                     cmdHtml = cmdEl.innerHTML+`<div>
    143.                         来自 ${urlObj.host} 的回复: 
    144.                         <span style="width:90px; display:inline-block">耗时=${delta} </span>
    145.                         <span>请求时间=${moment().format('YYYY-MM-DD HH:mm:ss')}</span>
    146.                     </div>`;
    147.                     cmdEl.innerHTML = cmdHtml;
    148.                     cmdEl.scrollTop = cmdEl.scrollHeight;
    149.                 } else {
    150.                     const signalEl = document.querySelector('.signal');
    151.                     signalEl.querySelectorAll('.item').forEach((item) => {
    152.                         item.style.backgroundColor = 'gainsboro';
    153.                     })
    154.                     document.querySelector('.detail').innerHTML = `<div>
    155.                     <div>网络延迟：err毫秒</div>
    156.                         <div>网络错误</div>
    157.                     </div>`
    158.                     document.querySelector('.noSignal').style.display = 'block'
    159.                 }
    160.             }).catch(function (err) {
    161.                 const signalEl = document.querySelector('.signal');
    162.                 signalEl.querySelectorAll('.item').forEach((item) => {
    163.                     item.style.backgroundColor = 'gainsboro';
    164.                 })
    165.                 document.querySelector('.detail').innerHTML = `<div>
    166.                     <div>网络延迟：err毫秒</div>
    167.                     <div>网络错误</div>
    168.                 </div>`
    169.                 document.querySelector('.noSignal').style.display = 'block'
    170.             });
    173.         }
    174.         setSignalTip('服务器文件地址')
    175.         setInterval(() => {
    176.             setSignalTip('服务器文件地址')
    177.         }, 1000)
    178.     </script>
    179. </body>
    181. </html>