-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
155 lines (144 loc) · 5.46 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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html>
<head>
<title>SPEEDTEST LITE C2S</title>
<style type="text/css">
html,
body {
margin: 0;
padding: 0;
border: none;
text-align: center;
background-color:#141526;
color: #FFF;
font-family: 微软雅黑;
}
div.test {
display: inline-block;
margin: 1em;
font-size: 2vw;
min-width: 10vw;
text-align: center;
}
div.testName,
div.meterUnit {
font-size: 1em;
}
div.meter {
font-size: 1.5em;
line-height: 2em;
height: 2em !important;
}
.flash {
animation: flash 0.6s linear infinite;
}
@keyframes flash {
0% { opacity: 0.6; }
50% { opacity: 1; }
}
a {
display: inline-block;
border: 0.15em solid #FFF;
padding: 0.3em 0.5em;
margin: 0.6em;
color: #FFF;
text-decoration: none;
}
#ip {
margin: 0.8em 0;
font-size: 1.2em;
}
@media all and (max-width: 50em) {
div.test {
font-size: 2em;
}
}
.lite-text{display:inline-block;background-color:#fff38e;color:#0b0c1b;border-radius:.2em;padding:.2em .2em .2em;margin-left:.4em;font-weight:700;line-height:1;font-size:11px;font-size:1.1rem;position:relative;top:-.4em}
</style>
<script type="text/javascript">
var w = null
function runTest() {
document.getElementById('startBtn').style.display = 'none'
document.getElementById('testArea').style.display = ''
document.getElementById('abortBtn').style.display = ''
document.getElementById('ip').style.display = ''
document.getElementById('intro').innerHTML = "当前客户端IP："
w = new Worker('./speedtest_worker.min.js')
var interval = setInterval(function () { w.postMessage('status') }, 100)
w.onmessage = function (event) {
var data = event.data.split(';')
var status = Number(data[0])
var dl = document.getElementById('download')
var ul = document.getElementById('upload')
var ping = document.getElementById('ping')
var ip = document.getElementById('ip')
var jitter = document.getElementById('jitter')
dl.className = status === 1 ? 'flash' : ''
ping.className = status === 2 ? 'flash' : ''
jitter.className = ul.className = status === 3 ? 'flash' : ''
if (status === 4) {
clearInterval(interval)
document.getElementById('abortBtn').style.display = 'none'
document.getElementById('startBtn').style.display = ''
document.getElementById('startBtn').innerHTML = "重新测试"
document.getElementById('intro').innerHTML = "当前客户端IP："
w = null
}
if (status === 5) {
clearInterval(interval)
document.getElementById('testArea').style.display = 'none'
document.getElementById('abortBtn').style.display = 'none'
document.getElementById('startBtn').style.display = ''
document.getElementById('startBtn').innerHTML = "开始测试"
document.getElementById('intro').innerHTML = "客户端对服务器网络测试"
document.getElementById('ip').style.display = 'none'
}
dl.textContent = data[1]
ul.textContent = data[2]
ping.textContent = data[3]
jitter.textContent = data[5]
ip.textContent = data[4]
}
w.postMessage('start')
}
function abortTest() {
if (w) w.postMessage('abort')
}
</script>
</head>
<body>
<br />
<h1>RUVDS<div class="lite-text">Speed Test</div></h1>
<div id="intro">本地到RUVDS机房的网速</div>
<div id="ip" style="display:none">None</div><br />
<a href="javascript:runTest()" id="startBtn">开始测试</a>
<a href="javascript:abortTest()" style="display:none" id="abortBtn">取消测试</a>
<div id="testArea" style="display:none">
<div class="test">
<div class="testName">下载速度</div>
<div class="meter"> <span id="download"></span> </div>
<div class="meterUnit">Mbit/s</div>
</div>
<div class="test">
<div class="testName">上传速度</div>
<div class="meter"> <span id="upload"></span> </div>
<div class="meterUnit">Mbit/s</div>
</div>
<div class="test">
<div class="testName">平均延迟</div>
<div class="meter"> <span id="ping"></span> </div>
<div class="meterUnit">ms</div>
</div>
<div class="test">
<div class="testName">延迟波动</div>
<div class="meter"> <span id="jitter"></span> </div>
<div class="meterUnit">ms</div>
</div>
<br/>
</div>
<!--
Localization and optimization by Jonvi
Thanks:https://github.com/adolfintel/speedtest
-->
</body>
</html>