<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>LibreSpeed Example</title><link rel="shortcut icon" href="favicon.ico"><style type="text/css">html,body {margin: 0;padding: 0;border: none;text-align: center;}#startBtn {display: inline-block;border: 0.15em solid #000000;padding: 0.3em 0.5em;margin: 0.6em;color: #000000;text-decoration: none;}#ip {margin: 0.8em 0;font-size: 1.2em;}#chart1Area,#chart2Area {width: 100%;max-width: 30em;height: 10em;display: block;margin: 0 auto;}</style><script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script> <!--THIS LIBRARY SUCKS!--><script src="speedtest.js"></script><script type="text/javascript">var s = nullfunction runTest() {var chart1ctx = document.getElementById('chart1Area').getContext('2d')var chart2ctx = document.getElementById('chart2Area').getContext('2d')var dlDataset = {label: 'Download',fill: false,lineTension: 0.1,backgroundColor: 'rgba(75,192,192,0.4)',borderColor: 'rgba(75,192,192,1)',borderCapStyle: 'butt',borderDash: [],borderDashOffset: 0.0,borderJoinStyle: 'miter',pointBorderColor: 'rgba(75,192,192,1)',pointBackgroundColor: '#fff',pointBorderWidth: 1,pointHoverRadius: 5,pointHoverBackgroundColor: 'rgba(75,192,192,1)',pointHoverBorderColor: 'rgba(220,220,220,1)',pointHoverBorderWidth: 2,pointRadius: 1,pointHitRadius: 10,data: [0],spanGaps: false}var ulDataset = {label: 'Upload',fill: false,lineTension: 0.1,backgroundColor: 'rgba(192,192,75,0.4)',borderColor: 'rgba(192,192,75,1)',borderCapStyle: 'butt',borderDash: [],borderDashOffset: 0.0,borderJoinStyle: 'miter',pointBorderColor: 'rgba(192,192,75,1)',pointBackgroundColor: '#fff',pointBorderWidth: 1,pointHoverRadius: 5,pointHoverBackgroundColor: 'rgba(192,192,75,1)',pointHoverBorderColor: 'rgba(220,220,220,1)',pointHoverBorderWidth: 2,pointRadius: 1,pointHitRadius: 10,data: [0],spanGaps: false}var pingDataset = {label: 'Ping',fill: false,lineTension: 0.1,backgroundColor: 'rgba(75,220,75,0.4)',borderColor: 'rgba(75,220,75,1)',borderCapStyle: 'butt',borderDash: [],borderDashOffset: 0.0,borderJoinStyle: 'miter',pointBorderColor: 'rgba(75,220,75,1)',pointBackgroundColor: '#fff',pointBorderWidth: 1,pointHoverRadius: 5,pointHoverBackgroundColor: 'rgba(75,220,75,1)',pointHoverBorderColor: 'rgba(220,220,220,1)',pointHoverBorderWidth: 2,pointRadius: 1,pointHitRadius: 10,data: [],spanGaps: false}var jitterDataset = {label: 'Jitter',fill: false,lineTension: 0.1,backgroundColor: 'rgba(220,75,75,0.4)',borderColor: 'rgba(220,75,75,1)',borderCapStyle: 'butt',borderDash: [],borderDashOffset: 0.0,borderJoinStyle: 'miter',pointBorderColor: 'rgba(220,75,75,1)',pointBackgroundColor: '#fff',pointBorderWidth: 1,pointHoverRadius: 5,pointHoverBackgroundColor: 'rgba(220,75,75,1)',pointHoverBorderColor: 'rgba(220,220,220,1)',pointHoverBorderWidth: 2,pointRadius: 1,pointHitRadius: 10,data: [],spanGaps: false}var chart1Options = {type: 'line',data: {datasets: [dlDataset, ulDataset]},options: {responsive: true,legend: {position: 'bottom'},scales: {xAxes: [{display: true,scaleLabel: {display: false},ticks: {beginAtZero: true}}],yAxes: [{display: true,scaleLabel: 'Speed',ticks: {beginAtZero: true}}]}}}var chart2Options = {type: 'line',data: {datasets: [pingDataset, jitterDataset]},options: {responsive: true,legend: {position: 'bottom'},scales: {xAxes: [{display: true,scaleLabel: {display: false},ticks: {beginAtZero: true}}],yAxes: [{display: true,scaleLabel: 'Latency',ticks: {beginAtZero: true}}]}}}var chart1 = new Chart(chart1ctx, chart1Options)var chart2 = new Chart(chart2ctx, chart2Options)document.getElementById('startBtn').style.display = 'none'document.getElementById('testArea').style.display = ''document.getElementById('abortBtn').style.display = ''s=new Speedtest();s.onupdate = function (data) {var status = data.testStateif (status === 1 && Number(data.dlStatus) > 0) {for(var i=~~(20*Number(data.dlProgress));i<20;i++) chart1.data.datasets[0].data[i]=(Number(data.dlStatus))chart1.data.labels[chart1.data.datasets[0].data.length - 1] = ''chart1.update()}if (status === 3 && Number(data.ulStatus) > 0) {for(var i=~~(20*Number(data.ulProgress));i<20;i++) chart1.data.datasets[1].data[i]=(Number(data.ulStatus))chart1.data.labels[chart1.data.datasets[1].data.length - 1] = ''chart1.update()}if (status === 2 && Number(data.pingStatus) > 0) {chart2.data.datasets[0].data.push(Number(data.pingStatus))chart2.data.datasets[1].data.push(Number(data.jitterStatus))chart2.data.labels[chart2.data.datasets[0].data.length - 1] = ''chart2.data.labels[chart2.data.datasets[1].data.length - 1] = ''chart2.update()}ip.textContent = data.clientIp}s.onend=function(aborted){document.getElementById('abortBtn').style.display = 'none'document.getElementById('startBtn').style.display = ''s = nullif (aborted) {document.getElementById('testArea').style.display = 'none'}}s.start();}function abortTest() {if (s) s.abort();}</script></head><body><h1>LibreSpeed - Chart.js example</h1><div id="testArea" style="display:none"><p id="ip">Please wait...</p><h2>Speed</h2><canvas id="chart1Area"></canvas><h2>Latency</h2><canvas id="chart2Area"></canvas><br/><a href="javascript:abortTest()" id="abortBtn">Abort</a></div><a href="javascript:runTest()" id="startBtn">Run speedtest</a><br/><br/> Charts by <a href="http://www.chartjs.org/">Chart.js</a><br/><br/><a href="https://github.com/librespeed/speedtest">Source code</a></body></html>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。