JSFiddle - React, Tailwind, and code Playground

by no2don

HTML

<img id="download">
<div id='log'></div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.css" integrity="sha512-3pIirOrwegjM6erE5gPSwkUzO+3cTjpnV9lexlNZqvupR64iZBnOOTiiLPb9M36zpMScbmUNIcHUqKD47M719g==" crossorigin="anonymous" referrerpolicy="no-referrer" />


<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js" integrity="sha512-VEd+nq25CkR676O+pLBnDW09R7VQX9Mdiij052gVCp5yVH3jGtH70Ho/UUv4mJDsEdTvqRCFZg0NKGiojGnUCw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

JavaScript

//JUST AN EXAMPLE, PLEASE USE YOUR OWN PICTURE!
var imageAddr = "https://upload.wikimedia.org/wikipedia/commons/3/3f/Fronalpstock_big.jpg";
var downloadSize = 14.7 * 1024 * 1024 ; //bytes

function ShowProgressMessage(msg) {
  if (console) {
    if (typeof msg == "string") {
      // console.log(msg);
      $('#log').append(msg + "<br>");
    } else {
      for (var i = 0; i < msg.length; i++) {
        //  console.log(msg[i]);
        $('#log').append(msg[i] + "<br>");
      }
    }
  }

  var oProgress = document.getElementById("progress");
  if (oProgress) {
    var actualHTML = (typeof msg == "string") ? msg : msg.join("<br />");
    oProgress.innerHTML = actualHTML;
  }
}

function InitiateSpeedDetection() {
  ShowProgressMessage("載入 14.7MB 大圖, please wait...");
  window.setTimeout(MeasureConnectionSpeed, 1);
};

if (window.addEventListener) {
  window.addEventListener('load', InitiateSpeedDetection, false);
} else if (window.attachEvent) {
  window.attachEvent('onload', InitiateSpeedDetection);
}

function MeasureConnectionSpeed() {
  var startTime, endTime;
  var download = new Image();
  download.onload = function() {
    endTime = (new Date()).getTime();
    //成功的話開始計算
    showResults();
  }

  download.onerror = function(err, msg) {
    ShowProgressMessage("Invalid image, or error downloading");
  }

  startTime = (new Date()).getTime();
  var cacheBuster = "?seed=" + startTime;
  download.src = imageAddr + cacheBuster;

  function showResults() {
    var duration = (endTime - startTime) / 1000;
    //大B轉小b
    var bitsLoaded = downloadSize * 8;
    var speedBps = (bitsLoaded / duration).toFixed(2);
    var speedKbps = (speedBps / 1024).toFixed(2);
    var speedMbps = (speedKbps / 1024).toFixed(2);
    ShowProgressMessage([
      "Your connection speed is:",
      speedBps + " bps",
      speedKbps + " kbps",
      speedMbps + " Mbps"
    ]);

    if (speedMbps < 1) {

      toastr.error("網路很慢");
      return;
    }
    if (speedMbps >= 1 & speedMbps <=...