2016-10-09 07:13:36 +00:00
<!DOCTYPE html>
< html >
2017-05-15 10:02:32 +00:00
< head >
< title > Speedtest< / title >
< style type = "text/css" >
html,
body {
margin: 0;
padding: 0;
border: none;
text-align: center;
}
2016-10-09 07:13:36 +00:00
2017-05-15 10:02:32 +00:00
div.test {
display: inline-block;
margin: 1em;
text-align: center;
}
div.testName,
div.meterUnit {
font-size: 3vw;
}
div.meter {
font-size: 6vw;
line-height: 1.5em;
height: 1.5em !important;
}
.flash {
animation: flash 0.6s linear infinite;
}
@keyframes flash {
0% { opacity: 0.6; }
50% { opacity: 1; }
}
< / style >
< / head >
< body >
< h1 > Speedtest< / h1 >
< div class = "test" >
< div class = "testName" > Download< / div >
< div class = "meter" > < span id = "download" > < / span > < / div >
< div class = "meterUnit" > Mbit/s< / div >
< / div >
< div class = "test" >
< div class = "testName" > Upload< / div >
< div class = "meter" > < span id = "upload" > < / span > < / div >
< div class = "meterUnit" > Mbit/s< / div >
< / div >
< div class = "test" >
< div class = "testName" > Latency< / div >
< div class = "meter" > < span id = "ping" > < / span > < / div >
< div class = "meterUnit" > ms< / div >
< / div >
< div class = "test" >
< div class = "testName" > Jitter< / div >
< div class = "meter" > < span id = "jitter" > < / span > < / div >
< div class = "meterUnit" > ms< / div >
< / div >
< div id = "ip" > < / div >
< script type = "text/javascript" >
var 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)
}
dl.textContent = data[1]
ul.textContent = data[2]
ping.textContent = data[3]
jitter.textContent = data[5]
ip.textContent = 'Your IP: ' + data[4]
}
2017-05-15 15:32:46 +00:00
w.postMessage('start {"url_dl": "garbage.php", "url_ul": "empty.php", "url_ping": "empty.php", "time_dl": "10", "time_ul": "15", "count_ping": "30"}') // start with custom parameters. paths are relative to js file. you can omit parameters that you don't want to change
2017-05-15 10:02:32 +00:00
< / script >
< / body >
< / html >
