设为首页收藏本站订阅更新

无忧脚本

 找回密码
 加入无忧

QQ登录

只需一步,快速开始

搜索
查看: 2314|回复: 0

[讨论] 好久没来发贴了,来一个简单的上传进度条代码,无需服务器支持的。

[复制链接]
发表于 2015-10-19 20:21:14 | 显示全部楼层 |阅读模式
使用了H5技术,IE慎行
  1. <!doctype html><html><head>
  2. <meta charset="UTF-8" />
  3. <meta name="viewport" content="width=device-width, user-scalable=no" />
  4. <title>带宽检测</title>
  5. <style type="text/css">
  6. body{ margin: 0mm; background-color: #eee; font-family: 微软雅黑; line-height: 1.5em }
  7. h1{ font: bold 7mm/12mm 微软雅黑; color: #fff; background-color: #555; margin: 0mm; padding-left: 1cm }
  8. blockquote{ border: 4mm ridge #fff; margin: 5mm 1cm; background-color: #fff; padding: 0mm 4mm }
  9. h2{ color: #c00; margin: 1mm 0mm; font-size: 5mm }
  10. </style><script type="text/javascript">
  11. onload = function() {
  12.         var tmp = new Array;        // [开始时间,上次时间,已加载, 测试中]
  13.         var xhr = new XMLHttpRequest;
  14.         var data = new Array(10 * 1024 * 1024 + 1).join("\x00");
  15.         var ipt = document.querySelector("input");
  16.         var prg = document.querySelector("progress");
  17.         var cnt = document.querySelectorAll("h3 b");

  18.         ipt.onclick = function() {
  19.                 if(tmp[3]) return endTest(tmp[2]);
  20.                 tmp[3] = true;
  21.                 ipt.value = "结束测试";
  22.                 xhr.open("POST", ".", true);
  23.                 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  24.                 xhr.upload.onprogress = testSpeed;
  25.                 tmp[0] = tmp[1] = new Date;
  26.                 tmp[2] = 0;
  27.                 xhr.send(data);
  28.         };

  29.         function testSpeed(evt) {
  30.                 prg.max = evt.total;
  31.                 prg.value = evt.loaded;
  32.                 var time = new Date - tmp[1];
  33.                 if(evt.loaded == evt.total) return endTest(evt.loaded);
  34.                 if(time < 1000) return;
  35.                 var speed = (evt.loaded - tmp[2]) * 1000 / time;
  36.                 cnt[0].innerHTML = toSize(speed);
  37.                 cnt[1].innerHTML = toSize(speed  * 8);
  38.                 tmp[1] = new Date;
  39.                 tmp[2] = evt.loaded;
  40.         }

  41.         function endTest(nmb) {
  42.                 xhr.abort();
  43.                 tmp[3] = false;
  44.                 ipt.value = "开始测试";
  45.                 var speed = nmb * 1000 / (new Date - tmp[0]);
  46.                 cnt[0].innerHTML = toSize(speed);
  47.                 cnt[1].innerHTML = toSize(speed  * 8);
  48.                 prg.value = prg.max;
  49.         }
  50. };
  51. function toSize(nmb, idx) {
  52.         idx = ~~idx;
  53.         var arr = ["", "K", "M", "G", "T"];
  54.         if(nmb < 1024 || idx >= arr.length) return nmb.toFixed(2) + " " + arr[idx];
  55.         return toSize(nmb / 1024, ++idx);
  56. }
  57. </script></head><body>
  58. <h1>测试带宽</h1>
  59. <blockquote>
  60.         <h2>上行速率测试</h2>
  61.         <p><progress></progress></p>
  62.         <p><input type="button" value="开始测试" /></p>
  63.         <h3>上传速度:<b>0 K</b>B/s<br />上行带宽:<b>0 M</b>bps</h3>
  64. </blockquote>
  65. </body></html>
复制代码


评分

参与人数 1威望 +20 收起 理由
飘雨之夜 + 20 很给力!

查看全部评分

您需要登录后才可以回帖 登录 | 加入无忧

本版积分规则

小黑屋|手机版|Archiver|无忧脚本 ( 苏ICP备05080427号 )|值班电话:027-62300445   鄂公网安备 42011102000433号

GMT+8, 2017-11-24 22:32 , Processed in 0.097724 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表