关于前端:干货js简单实现动态网速强度

先定一个 div 用于显示‘弱、中、强’三个强度的图标，这里也能够间接显示文字：

    <div class="signal"><img id="signal_ico" src="../images/strong_signal.png" width="26" height="18" title="强"></div>

在页面加载实现时也就是测速开始时定义一个轮询并保留一下以后工夫，用一张不大不小的图片做测速，这里选了个百度的 logo 图，因为不必放心资源生效。
留神在图片后增加 rd=_" +new Date().getTime(), 否则浏览器会缓存以后图片就不去加载了，影响到测速

// 测速开始时就执行
   var timer =  setInterval(function () {st = new Date();
       var img = document.createElement("img");
       img.style.width = 0;
       img.style.height = 0;
       img.style.display = "none";
       img.src =
         "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1971525978,455276806&fm=26&gp=0.jpg?rd=_" +
         new Date().getTime();
       img.onload = showspeed;
     }, 10000);
window.onbeforeunload = function (){clearInterval(timer)
}


function showspeed() {var arr = ["弱", "中", "强"];
  var filesize = 35.4; //measured in KB
  var et = new Date();
  var speed = Math.round(filesize * 1000) / (et - st);
  
// console.log(speed);
    speed > 0 && speed <= 100
      ? changeSignalIco("week_signal.png", "弱")
      : speed > 100 && speed <= 300
      ? changeSignalIco("general_signal.png", "中")
      : speed > 300
      ? changeSignalIco("strong_signal.png", "强")
      : changeSignalIco("strong_signal.png", "强");
}  

function changeSignalIco(img,title){$("#signal_ico")[0].src = "../images/" + img;
 $("#signal_ico")[0].title = title;
}

大略原理就是动静去轮询加载一张暗藏的图片，当图片加载实现时执行 showspeed 办法进行加载工夫和文件大小的计算得出网速，而后依据不同的网速对强度图标进行切换。