-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
102 lines (95 loc) · 3.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>网络测速</title>
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/custom.modernizr.js"></script>
</head>
<body>
<script>
document.write('<script src=' +
('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
'.js><\/script>')
</script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.topbar.js"></script>
<script>
$(document).foundation();
</script>
<script>
var startTime, endTime;
var imageAddr = "/test1.jpg?";
var downloadSize = [2348490];
//var imageAddr = "http://r.photo.store.qq.com/psb?/253ad6bd-2593-4d74-aee2-b358921dbbe1/ANtouNQV7HTVbaiDXrt2WIdAIiESHjEY1na3ezVlpaI!/o/dHx1*5cdDAAA&bo=IANYAkAGsAQBAKw!&rf=photoDetailHDViewer&";
//var downloadSize = [457000];
function test_speed(){
$("#speed-label").text("正在测速");
var download = new Image();
download.onload = function () {
endTime = (new Date()).getTime();
var duration = (endTime - startTime) / 1000;
var bitsLoaded = downloadSize * 8;
var speedBps = (bitsLoaded / duration).toFixed(2);
var speedKbps = (speedBps / 1024).toFixed(2);
var speedMbps = (speedKbps / 1024).toFixed(2);
console.log("test speed: " + speedKbps + "Kbps")
delete download;
if(speedMbps > max_speed){max_speed = speedMbps;}
$("#processing").css("width", processing+"%");
if(processing < 100){
processing += 20;
test_process();
}
else{
$("#speed-label").text("您目前的网速为" + max_speed + " Mbps");
}
}
startTime = (new Date()).getTime();
download.src = imageAddr + "n=" + Math.random();
};
var processing = 0;
var max_speed = 0;
function test_start(){
console.log("开始测速------>")
processing = 20;
$("#processing").css("width", "20%");
max_speed = 0;
test_process();
}
function test_process(){
setTimeout(
function(){
test_speed();
}, 200);
}
</script>
<nav class="top-bar" data-options="is_hover:false">
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1><a href="#">华工信息软件有限公司 </a></h1>
</li>
</ul>
</nav>
<div class="row">
<div class="large-12 medium-12 small-12 columns">
<div class="panel">
<h2>我想知道网络速度：）</h2>
<h4>您正在通过浏览器测试所访问资源的带宽速率。</h4>
<h4>为了得到真实的测试结果，开始测速前<b>请关闭所有占用CPU、网络的应用程序</b>。</h4>
<div>
<button class="large expand" onclick="test_start()">开始测速</button>
</div>
<div class="progress success round"><span id="processing" class="meter" style="width: 0%"></span></div>
<div>
<span id="speed-label" class="success label" style="font-size: 20px;">这里会显示测速结论。</span>
</div>
</div>
</div>
</div>
</body>
</html>