2016-10-09 07:13:36 +00:00
<!DOCTYPE html>
< html >
2016-10-22 13:39:16 +00: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 16:58:40 +00:00
margin:1em;
2016-10-22 13:39:16 +00:00
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;}
}
2016-10-09 07:13:36 +00:00
2016-10-22 13:39:16 +00: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 16:58:40 +00: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 13:39:16 +00:00
< / div >
2017-02-26 11:15:51 +00:00
< div id = "ip" > < / div >
2016-10-22 13:39:16 +00:00
< script type = "text/javascript" >
2017-03-02 16:58:40 +00:00
var w=new Worker("speedtest_worker.min.js");
2016-10-22 13:39:16 +00: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 16:58:40 +00: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 13:39:16 +00:00
if(status>=4){
clearInterval(interval);
}
dl.innerHTML=data[1];
ul.innerHTML=data[2];
ping.innerHTML=data[3];
2017-03-02 16:58:40 +00:00
jitter.innerHTML=data[5];
2017-02-26 11:15:51 +00:00
ip.innerHTML="Your IP: "+data[4];
2016-10-22 13:39:16 +00:00
}.bind(this);
2016-10-23 17:47:55 +00: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 13:39:16 +00:00
< / script >
< / body >
2016-10-09 07:13:36 +00:00
< / html >
