example7.html 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta name="referrer" content="no-referrer" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no" />
  7. <title>Speedtest</title>
  8. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
  9. <style type="text/css">
  10. .st-block {
  11. text-align: center;
  12. }
  13. .st-btn {
  14. margin-top: -0.5rem;
  15. margin-left: 1.5rem;
  16. }
  17. .st-value>span:empty::before {
  18. content: "0.00";
  19. color: #636c72;
  20. }
  21. #st-ip:empty::before {
  22. content: "___.___.___.___";
  23. color: #636c72;
  24. }
  25. </style>
  26. </head>
  27. <body class="my-4">
  28. <div class="container">
  29. <div class="row">
  30. <div class="col-sm-12 mb-3">
  31. <p class="h1">
  32. Speedtest
  33. <button id="st-start" class="btn btn-outline-primary st-btn" onclick="startTest()">Start</button>
  34. <button id="st-stop" class="btn btn-danger st-btn" onclick="stopTest()" hidden="true">Stop</button>
  35. </p>
  36. <p class="lead">
  37. Your IP: <span id="st-ip"></span>
  38. <input type="checkbox" id="st-ip-checkbox">
  39. </p>
  40. </div>
  41. <div class="col-lg-3 col-md-6 mb-3 st-block">
  42. <h3>Download</h3>
  43. <p class="display-4 st-value"><span id="st-download"></span></p>
  44. <p class="lead">Mbit/s</p>
  45. <p><input type="checkbox" id="st-download-checkbox"></p>
  46. </div>
  47. <div class="col-lg-3 col-md-6 mb-3 st-block">
  48. <h3>Upload</h3>
  49. <p class="display-4 st-value"><span id="st-upload"></span></p>
  50. <p class="lead">Mbit/s</p>
  51. <p><input type="checkbox" id="st-upload-checkbox"></p>
  52. </div>
  53. <div class="col-lg-3 col-md-6 mb-3 st-block">
  54. <h3>Ping</h3>
  55. <p class="display-4 st-value"><span id="st-ping"></span></p>
  56. <p class="lead">ms</p>
  57. <p><input type="checkbox" id="st-ping-checkbox" checked></p>
  58. </div>
  59. <div class="col-lg-3 col-md-6 mb-3 st-block">
  60. <h3>Jitter</h3>
  61. <p class="display-4 st-value"><span id="st-jitter"></span></p>
  62. <p class="lead">ms</p>
  63. </div>
  64. </div>
  65. </div>
  66. <script type="text/javascript">
  67. var worker = null
  68. function startTest() {
  69. document.getElementById('st-start').hidden = true
  70. document.getElementById('st-stop').hidden = false
  71. worker = new Worker('speedtest_worker.min.js')
  72. var interval = setInterval(function () { worker.postMessage('status') }, 100)
  73. worker.onmessage = function (event) {
  74. var download = document.getElementById('st-download')
  75. var upload = document.getElementById('st-upload')
  76. var ping = document.getElementById('st-ping')
  77. var jitter = document.getElementById('st-jitter')
  78. var ip = document.getElementById('st-ip')
  79. var data = event.data.split(';')
  80. var status = Number(data[0])
  81. if (status >= 4) {
  82. clearInterval(interval)
  83. document.getElementById('st-start').hidden = false
  84. document.getElementById('st-stop').hidden = true
  85. w = null
  86. }
  87. if (status === 5) {
  88. // speedtest cancelled, clear output data
  89. data = []
  90. }
  91. download.textContent = (status==1&&data[1]==0)?"Starting":data[1]
  92. upload.textContent = (status==3&&data[2]==0)?"Starting":data[2]
  93. ping.textContent = data[3]
  94. ip.textContent = data[4]
  95. jitter.textContent = data[5]
  96. }
  97. var ip_checkbox = document.getElementById("st-ip-checkbox")
  98. var dl_checkbox = document.getElementById("st-download-checkbox")
  99. var ul_checkbox = document.getElementById("st-upload-checkbox")
  100. var ping_checkbox = document.getElementById("st-ping-checkbox")
  101. var test_order=(ip_checkbox.checked?"I":"")+(dl_checkbox.checked?"D":"")+(ul_checkbox.checked?"U":"")+(ping_checkbox.checked?"P":"")
  102. worker.postMessage('start {"test_order":"'+test_order+'" }')
  103. }
  104. function stopTest() {
  105. if (worker) worker.postMessage('abort')
  106. }
  107. </script>
  108. </body>
  109. </html>