2016-10-09 09:13:36 +02:00
<!DOCTYPE html>
< html >
2017-05-15 12:02:32 +02:00
< head >
< title > Speedtest< / title >
< style type = "text/css" >
html ,
body {
margin : 0 ;
padding : 0 ;
border : none ;
text-align : center ;
}
2016-10-09 09:13:36 +02:00
2017-05-15 12:02:32 +02:00
div . test {
display : inline-block ;
margin : 1 em ;
text-align : center ;
}
div . testName ,
div . meterUnit {
font-size : 3 vw ;
}
div . meter {
font-size : 6 vw ;
line-height : 1.5 em ;
height : 1.5 em !important ;
}
. flash {
animation : flash 0.6 s 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 17:32:46 +02: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 12:02:32 +02:00
< / script >
< / body >
< / html >
