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;
font-size:2vw;
min-width:20vw;
2016-10-22 13:39:16 +00:00
text-align:center;
}
div.testName,div.meterUnit{
2017-03-02 16:58:40 +00:00
font-size:1em;
2016-10-22 13:39:16 +00:00
}
div.meter{
2017-03-02 16:58:40 +00:00
font-size:1.5em;
2016-10-22 13:39:16 +00:00
line-height:1.5em;
2017-03-02 16:58:40 +00:00
height:2em !important;
2016-10-22 13:39:16 +00:00
}
.flash{
animation:flash 0.6s linear infinite;
}
@keyframes flash{
0%{opacity:0.6;}
50%{opacity:1;}
}
a{
display:inline-block;
border:0.15em solid #000000;
padding:0.3em 0.5em;
margin:0.6em;
color:#000000;
text-decoration:none;
}
2017-02-26 11:15:51 +00:00
#ip{
margin:0.8em 0;
font-size:1.2em;
}
2017-03-02 16:58:40 +00:00
@media all and (max-width: 50em){
div.test{
font-size:2em;
}
}
2016-10-22 13:39:16 +00:00
< / 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="";
2017-03-02 16:58:40 +00:00
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);
document.getElementById("abortBtn").style.display="none";
document.getElementById("startBtn").style.display="";
w=null;
}
if(status==5){
document.getElementById("testArea").style.display="none";
}
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=data[4];
2016-10-22 13:39:16 +00:00
}.bind(this);
w.postMessage("start");
}
function abortTest(){
if(w)w.postMessage("abort");
}
< / script >
< / head >
< body >
< h1 > Speedtest< / h1 >
< div id = "testArea" style = "display:none" >
2017-02-26 11:15:51 +00:00
< div id = "ip" > Please wait...< / div >
2016-10-22 13:39:16 +00:00
< 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 >
< br / >
< a href = "javascript:abortTest()" id = "abortBtn" > Abort< / a >
< / div >
< a href = "javascript:runTest()" id = "startBtn" > Run speedtest< / a >
< / body >
2016-10-09 07:13:36 +00:00
< / html >
