2016-10-09 09:13:36 +02:00
<!DOCTYPE html>
< html >
2016-10-22 15:39:16 +02:00
< head >
< title > Speedtest< / title >
< style type = "text/css" >
html , body {
margin : 0 ;
padding : 0 ;
border : none ;
text-align : center ;
}
div . test {
display : inline-block ;
2017-03-02 17:58:40 +01:00
margin : 1 em ;
2016-10-22 15:39:16 +02:00
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 ; }
}
2016-10-09 09:13:36 +02:00
2016-10-22 15:39:16 +02:00
< / 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 >
2017-03-02 17:58:40 +01:00
< / div >
< div class = "test" >
< div class = "testName" > Jitter< / div >
< div class = "meter" > < span id = "jitter" > < / span > < / div >
< div class = "meterUnit" > ms< / div >
2016-10-22 15:39:16 +02:00
< / div >
2017-02-26 12:15:51 +01:00
< div id = "ip" > < / div >
2016-10-22 15:39:16 +02:00
< script type = "text/javascript" >
2017-03-02 17:58:40 +01:00
var w = new Worker ( "speedtest_worker.min.js" ) ;
2016-10-22 15:39:16 +02:00
var interval = setInterval ( function ( ) { w . postMessage ( "status" ) ; } . bind ( this ) , 100 ) ;
w . onmessage = function ( event ) {
var data = event . data . split ( ";" ) ;
var status = Number ( data [ 0 ] ) ;
2017-03-02 17:58:40 +01:00
var dl = document . getElementById ( "download" ) , ul = document . getElementById ( "upload" ) , ping = document . getElementById ( "ping" ) , ip = document . getElementById ( "ip" ) , jitter = document . getElementById ( "jitter" ) ;
dl . className = status == 1 ? "flash" : "" ; ping . className = status == 2 ? "flash" : "" ; jitter . className = ul . className = status == 3 ? "flash" : "" ;
2016-10-22 15:39:16 +02:00
if ( status >= 4 ) {
clearInterval ( interval ) ;
}
dl . innerHTML = data [ 1 ] ;
ul . innerHTML = data [ 2 ] ;
ping . innerHTML = data [ 3 ] ;
2017-03-02 17:58:40 +01:00
jitter . innerHTML = data [ 5 ] ;
2017-02-26 12:15:51 +01:00
ip . innerHTML = "Your IP: " + data [ 4 ] ;
2016-10-22 15:39:16 +02:00
} . bind ( this ) ;
2016-10-23 19:47:55 +02:00
w . postMessage ( 'start {"url_dl":"garbage.php","url_ul":"empty.dat","url_ping":"empty.dat","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
2016-10-22 15:39:16 +02:00
< / script >
< / body >
2016-10-09 09:13:36 +02:00
< / html >
