492 lines
18 KiB
HTML
492 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>SpeedTest · 网速测试 - lmve.net</title>
|
|
<style>
|
|
:root {
|
|
--bg: #0b1020;
|
|
--card: rgba(255, 255, 255, 0.045);
|
|
--border: rgba(255, 255, 255, 0.08);
|
|
--text: #e8ecf6;
|
|
--muted: #8b93a7;
|
|
--accent1: #00d4ff;
|
|
--accent2: #7c5cff;
|
|
--green: #2ee6a8;
|
|
}
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
background: radial-gradient(1200px 600px at 50% -100px, #17203f 0%, var(--bg) 60%) fixed, var(--bg);
|
|
color: var(--text);
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
|
min-height: 100vh;
|
|
}
|
|
.wrap { max-width: 860px; margin: 0 auto; padding: 32px 16px 60px; }
|
|
header { text-align: center; margin-bottom: 28px; }
|
|
.logo {
|
|
font-size: 30px; font-weight: 800; letter-spacing: 0.5px;
|
|
background: linear-gradient(90deg, var(--accent1), var(--accent2));
|
|
-webkit-background-clip: text; background-clip: text; color: transparent;
|
|
}
|
|
.sub { color: var(--muted); font-size: 13px; margin-top: 6px; }
|
|
|
|
.card {
|
|
background: var(--card);
|
|
border: 1px solid var(--border);
|
|
border-radius: 18px;
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
/* ---------- 仪表盘 ---------- */
|
|
.gauge-card { position: relative; padding: 10px 20px 28px; text-align: center; }
|
|
.gauge-box { position: relative; width: 360px; height: 300px; margin: 0 auto; }
|
|
#gauge { width: 360px; height: 300px; }
|
|
.gauge-center {
|
|
position: absolute; left: 0; right: 0; top: 96px; text-align: center; pointer-events: none;
|
|
}
|
|
#gaugeValue { font-size: 44px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -1px; }
|
|
#gaugeUnit { color: var(--muted); font-size: 14px; margin-top: 2px; }
|
|
#phaseLabel { color: var(--muted); font-size: 14px; margin-top: 6px; min-height: 20px; }
|
|
#startBtn {
|
|
margin-top: 18px; padding: 13px 56px; font-size: 17px; font-weight: 700; color: #06121f;
|
|
background: linear-gradient(90deg, var(--accent1), var(--accent2));
|
|
border: none; border-radius: 999px; cursor: pointer; transition: transform .12s, filter .2s, opacity .2s;
|
|
box-shadow: 0 8px 28px rgba(0, 212, 255, 0.25);
|
|
}
|
|
#startBtn:hover { transform: translateY(-1px); filter: brightness(1.08); }
|
|
#startBtn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
|
|
|
|
/* ---------- 统计卡片 ---------- */
|
|
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; }
|
|
.stat {
|
|
background: var(--card); border: 1px solid var(--border); border-radius: 14px;
|
|
padding: 16px 10px; text-align: center;
|
|
}
|
|
.stat .label { color: var(--muted); font-size: 12px; }
|
|
.stat .value { font-size: 26px; font-weight: 700; margin-top: 6px; font-variant-numeric: tabular-nums; }
|
|
.stat .unit { color: var(--muted); font-size: 12px; margin-top: 2px; }
|
|
.stat.done { border-color: rgba(46, 230, 168, 0.35); }
|
|
|
|
/* ---------- 排行榜 ---------- */
|
|
.rank-card { margin-top: 18px; padding: 22px 22px 10px; }
|
|
.rank-head { display: flex; align-items: baseline; justify-content: space-between; }
|
|
.rank-head h2 { font-size: 18px; }
|
|
.total { color: var(--muted); font-size: 13px; }
|
|
.tabs { display: flex; gap: 8px; margin: 14px 0 4px; }
|
|
.tab {
|
|
padding: 7px 18px; font-size: 13px; color: var(--muted); background: transparent;
|
|
border: 1px solid var(--border); border-radius: 999px; cursor: pointer; transition: all .15s;
|
|
}
|
|
.tab:hover { color: var(--text); }
|
|
.tab.active {
|
|
color: #06121f; font-weight: 700; border-color: transparent;
|
|
background: linear-gradient(90deg, var(--accent1), var(--accent2));
|
|
}
|
|
table { width: 100%; border-collapse: collapse; margin-top: 10px; }
|
|
th {
|
|
text-align: left; color: var(--muted); font-size: 12px; font-weight: 500;
|
|
padding: 8px 10px; border-bottom: 1px solid var(--border);
|
|
}
|
|
td { padding: 11px 10px; font-size: 14px; border-bottom: 1px solid rgba(255,255,255,0.04); font-variant-numeric: tabular-nums; }
|
|
tr:last-child td { border-bottom: none; }
|
|
.rank-no {
|
|
display: inline-flex; align-items: center; justify-content: center;
|
|
width: 24px; height: 24px; border-radius: 8px; font-size: 12px; font-weight: 700;
|
|
background: rgba(255,255,255,0.07); color: var(--muted);
|
|
}
|
|
.rank-no.top1 { background: linear-gradient(135deg, #ffd76a, #ff9d3c); color: #3a2500; }
|
|
.rank-no.top2 { background: linear-gradient(135deg, #e8ecf6, #aab4cc); color: #232a3d; }
|
|
.rank-no.top3 { background: linear-gradient(135deg, #f0b08c, #c87a4a); color: #3d1d08; }
|
|
.speed-val { font-weight: 700; }
|
|
.ip { color: var(--muted); font-size: 13px; }
|
|
.time { color: var(--muted); font-size: 12px; }
|
|
.empty { text-align: center; color: var(--muted); padding: 26px 0; font-size: 14px; }
|
|
|
|
footer { text-align: center; color: var(--muted); font-size: 12px; margin-top: 26px; line-height: 1.8; }
|
|
footer a { color: var(--accent1); text-decoration: none; }
|
|
|
|
@media (max-width: 640px) {
|
|
.stats { grid-template-columns: repeat(2, 1fr); }
|
|
.gauge-box { width: 320px; height: 270px; }
|
|
#gauge { width: 320px; height: 270px; }
|
|
.gauge-center { top: 84px; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
<header>
|
|
<div class="logo">⚡ SpeedTest</div>
|
|
<div class="sub">speedtest.lmve.net · lmve.net 网速测试服务</div>
|
|
</header>
|
|
|
|
<main>
|
|
<!-- 仪表盘 -->
|
|
<section class="card gauge-card">
|
|
<div class="gauge-box">
|
|
<canvas id="gauge" width="360" height="300"></canvas>
|
|
<div class="gauge-center">
|
|
<div id="gaugeValue">--</div>
|
|
<div id="gaugeUnit">Mbps</div>
|
|
</div>
|
|
</div>
|
|
<div id="phaseLabel">点击下方按钮开始测速（约需 20~40 秒）</div>
|
|
<button id="startBtn">开始测速</button>
|
|
</section>
|
|
|
|
<!-- 结果统计 -->
|
|
<section class="stats">
|
|
<div class="stat" id="cardLatency">
|
|
<div class="label">延迟</div><div class="value" id="statLatency">--</div><div class="unit">ms</div>
|
|
</div>
|
|
<div class="stat" id="cardJitter">
|
|
<div class="label">抖动</div><div class="value" id="statJitter">--</div><div class="unit">ms</div>
|
|
</div>
|
|
<div class="stat" id="cardDownload">
|
|
<div class="label">下载速度</div><div class="value" id="statDownload">--</div><div class="unit">Mbps</div>
|
|
</div>
|
|
<div class="stat" id="cardUpload">
|
|
<div class="label">上传速度</div><div class="value" id="statUpload">--</div><div class="unit">Mbps</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 排行榜 -->
|
|
<section class="card rank-card">
|
|
<div class="rank-head">
|
|
<h2>🏆 测速排行</h2>
|
|
<span class="total" id="totalCount"></span>
|
|
</div>
|
|
<div class="tabs">
|
|
<button class="tab active" data-type="download">下载排行</button>
|
|
<button class="tab" data-type="upload">上传排行</button>
|
|
<button class="tab" data-type="latency">延迟排行</button>
|
|
</div>
|
|
<table id="rankTable">
|
|
<thead><tr><th style="width:64px">#</th><th>IP</th><th id="thSpeed">下载速度</th><th style="width:130px">时间</th></tr></thead>
|
|
<tbody id="rankBody"><tr><td colspan="4" class="empty">加载中…</td></tr></tbody>
|
|
</table>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>
|
|
SpeedTest · Go + Gin + SQLite · 由 Caddy 反代提供 HTTPS<br>
|
|
每次测速结果自动入库参与排行
|
|
</footer>
|
|
</div>
|
|
|
|
<script>
|
|
"use strict";
|
|
|
|
/* ================= 元素引用 ================= */
|
|
const gauge = document.getElementById('gauge');
|
|
const gaugeValue = document.getElementById('gaugeValue');
|
|
const gaugeUnit = document.getElementById('gaugeUnit');
|
|
const phaseLabel = document.getElementById('phaseLabel');
|
|
const startBtn = document.getElementById('startBtn');
|
|
const statLatency = document.getElementById('statLatency');
|
|
const statJitter = document.getElementById('statJitter');
|
|
const statDownload = document.getElementById('statDownload');
|
|
const statUpload = document.getElementById('statUpload');
|
|
const rankBody = document.getElementById('rankBody');
|
|
const rankTable = document.getElementById('rankTable');
|
|
const thSpeed = document.getElementById('thSpeed');
|
|
const totalCount = document.getElementById('totalCount');
|
|
|
|
let running = false;
|
|
let gaugeMode = 'speed'; // speed | latency
|
|
let rankType = 'download';
|
|
|
|
/* ================= 仪表盘 ================= */
|
|
function drawGauge(frac) {
|
|
const ctx = gauge.getContext('2d');
|
|
const W = gauge.width, H = gauge.height;
|
|
ctx.clearRect(0, 0, W, H);
|
|
const cx = W / 2, cy = H / 2 + 18, r = 118;
|
|
const start = Math.PI * 0.75, end = Math.PI * 2.25; // 270°
|
|
const sweep = end - start;
|
|
|
|
// 轨道
|
|
ctx.lineWidth = 16; ctx.lineCap = 'round';
|
|
ctx.strokeStyle = 'rgba(255,255,255,0.07)';
|
|
ctx.beginPath(); ctx.arc(cx, cy, r, start, end); ctx.stroke();
|
|
|
|
// 进度（渐变）
|
|
const grad = ctx.createLinearGradient(0, 0, W, H);
|
|
grad.addColorStop(0, '#00d4ff');
|
|
grad.addColorStop(1, '#7c5cff');
|
|
ctx.strokeStyle = grad;
|
|
ctx.beginPath(); ctx.arc(cx, cy, r, start, start + sweep * Math.min(1, Math.max(0, frac))); ctx.stroke();
|
|
|
|
// 刻度
|
|
ctx.lineWidth = 2; ctx.strokeStyle = 'rgba(255,255,255,0.25)';
|
|
for (let i = 0; i <= 10; i++) {
|
|
const a = start + sweep * i / 10;
|
|
ctx.beginPath();
|
|
ctx.moveTo(cx + Math.cos(a) * (r - 28), cy + Math.sin(a) * (r - 28));
|
|
ctx.lineTo(cx + Math.cos(a) * (r - 34), cy + Math.sin(a) * (r - 34));
|
|
ctx.stroke();
|
|
}
|
|
|
|
// 指针
|
|
const a = start + sweep * Math.min(1, Math.max(0, frac));
|
|
ctx.strokeStyle = '#fff'; ctx.lineWidth = 3;
|
|
ctx.beginPath(); ctx.moveTo(cx, cy); ctx.lineTo(cx + Math.cos(a) * (r - 40), cy + Math.sin(a) * (r - 40)); ctx.stroke();
|
|
ctx.fillStyle = '#fff';
|
|
ctx.beginPath(); ctx.arc(cx, cy, 7, 0, Math.PI * 2); ctx.fill();
|
|
}
|
|
|
|
function speedFrac(mbps) {
|
|
// 对数刻度：1 ~ 1000 Mbps
|
|
return Math.log10(1 + mbps) / Math.log10(1001);
|
|
}
|
|
|
|
function updateGaugeSpeed(mbps) {
|
|
gaugeMode = 'speed';
|
|
gaugeValue.textContent = (mbps >= 100 ? mbps.toFixed(0) : mbps.toFixed(1));
|
|
gaugeUnit.textContent = 'Mbps';
|
|
drawGauge(speedFrac(mbps));
|
|
}
|
|
|
|
function updateGaugeLatency(ms) {
|
|
gaugeMode = 'latency';
|
|
gaugeValue.textContent = ms.toFixed(0);
|
|
gaugeUnit.textContent = 'ms';
|
|
drawGauge(Math.min(1, 100 / Math.max(1, ms)));
|
|
}
|
|
|
|
function setPhase(text) {
|
|
phaseLabel.textContent = text;
|
|
}
|
|
|
|
/* ================= 延迟测试 ================= */
|
|
async function pingOnce() {
|
|
const t0 = performance.now();
|
|
await fetch('/api/ping?t=' + Date.now(), { cache: 'no-store' });
|
|
return performance.now() - t0;
|
|
}
|
|
|
|
async function pingTest(n) {
|
|
const rtts = [];
|
|
for (let i = 0; i < n; i++) {
|
|
const t = await pingOnce();
|
|
rtts.push(t);
|
|
const mid = [...rtts].sort((a, b) => a - b)[Math.floor(rtts.length / 2)];
|
|
updateGaugeLatency(mid);
|
|
if (i < n - 1) await new Promise(r => setTimeout(r, 80));
|
|
}
|
|
rtts.sort((a, b) => a - b);
|
|
const latency = rtts[Math.floor(rtts.length / 2)]; // 中位数
|
|
const jitter = rtts.reduce((s, v) => s + Math.abs(v - latency), 0) / rtts.length; // 平均绝对偏差
|
|
return { latency, jitter };
|
|
}
|
|
|
|
/* ================= 下载测试 ================= */
|
|
async function downloadOnce(sizeBytes) {
|
|
const t0 = performance.now();
|
|
const resp = await fetch('/api/download?size=' + sizeBytes + '&t=' + Date.now(), { cache: 'no-store' });
|
|
if (!resp.ok || !resp.body) throw new Error('下载测试请求失败');
|
|
const reader = resp.body.getReader();
|
|
let received = 0, lastT = t0, lastBytes = 0;
|
|
for (;;) {
|
|
const { done, value } = await reader.read();
|
|
if (done) break;
|
|
received += value.length;
|
|
const now = performance.now();
|
|
if (now - lastT > 200) {
|
|
updateGaugeSpeed(((received - lastBytes) * 8) / ((now - lastT) / 1000) / 1e6);
|
|
lastT = now; lastBytes = received;
|
|
}
|
|
}
|
|
const dt = (performance.now() - t0) / 1000;
|
|
return (received * 8) / dt / 1e6; // Mbps
|
|
}
|
|
|
|
async function downloadTest() {
|
|
const sizes = [1048576, 2621440, 5242880, 10485760, 26214400]; // 1, 2.5, 5, 10, 25 MB
|
|
const results = [];
|
|
for (const size of sizes) {
|
|
setPhase('下载测速中 ' + (size / 1048576).toFixed(size < 1048576 * 2 ? 0 : 1) + ' MB …');
|
|
results.push(await downloadOnce(size));
|
|
}
|
|
return Math.max(...results);
|
|
}
|
|
|
|
/* ================= 上传测试 ================= */
|
|
let prngState = (Date.now() ^ (Math.random() * 0xffffffff)) >>> 0;
|
|
function randomBytes(size) {
|
|
const u8 = new Uint8Array(size);
|
|
let x = prngState;
|
|
for (let i = 0; i < size; i += 4) {
|
|
x ^= x << 13; x >>>= 0; x ^= x >>> 17; x ^= x << 5; x >>>= 0;
|
|
u8[i] = x & 0xff;
|
|
if (i + 1 < size) u8[i + 1] = (x >>> 8) & 0xff;
|
|
if (i + 2 < size) u8[i + 2] = (x >>> 16) & 0xff;
|
|
if (i + 3 < size) u8[i + 3] = (x >>> 24) & 0xff;
|
|
}
|
|
prngState = x;
|
|
return u8;
|
|
}
|
|
|
|
function uploadOnce(sizeBytes) {
|
|
return new Promise((resolve, reject) => {
|
|
const data = randomBytes(sizeBytes);
|
|
const xhr = new XMLHttpRequest();
|
|
const t0 = performance.now();
|
|
let lastT = t0, lastBytes = 0;
|
|
xhr.upload.onprogress = (e) => {
|
|
if (!e.lengthComputable) return;
|
|
const now = performance.now();
|
|
if (now - lastT > 200) {
|
|
updateGaugeSpeed(((e.loaded - lastBytes) * 8) / ((now - lastT) / 1000) / 1e6);
|
|
lastT = now; lastBytes = e.loaded;
|
|
}
|
|
};
|
|
xhr.onload = () => {
|
|
const dt = (performance.now() - t0) / 1000;
|
|
resolve((sizeBytes * 8) / dt / 1e6);
|
|
};
|
|
xhr.onerror = () => reject(new Error('上传测试请求失败'));
|
|
xhr.ontimeout = () => reject(new Error('上传测试超时'));
|
|
xhr.timeout = 30000;
|
|
xhr.open('POST', '/api/upload?t=' + Date.now());
|
|
xhr.setRequestHeader('Content-Type', 'application/octet-stream');
|
|
xhr.send(data);
|
|
});
|
|
}
|
|
|
|
async function uploadTest() {
|
|
const sizes = [1048576, 2621440, 5242880, 10485760]; // 1, 2.5, 5, 10 MB
|
|
const results = [];
|
|
for (const size of sizes) {
|
|
setPhase('上传测速中 ' + (size / 1048576).toFixed(size < 1048576 * 2 ? 0 : 1) + ' MB …');
|
|
results.push(await uploadOnce(size));
|
|
}
|
|
return Math.max(...results);
|
|
}
|
|
|
|
/* ================= 结果提交 ================= */
|
|
async function submitResult(r) {
|
|
const resp = await fetch('/api/result', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
latency_ms: +r.latency.toFixed(2),
|
|
jitter_ms: +r.jitter.toFixed(2),
|
|
download_mbps: +r.download.toFixed(2),
|
|
upload_mbps: +r.upload.toFixed(2),
|
|
}),
|
|
});
|
|
if (!resp.ok) throw new Error('结果提交失败');
|
|
return resp.json();
|
|
}
|
|
|
|
/* ================= 排行榜 ================= */
|
|
const SPEED_HEAD = { download: '下载速度', upload: '上传速度', latency: '延迟' };
|
|
|
|
async function loadRankings() {
|
|
try {
|
|
const resp = await fetch('/api/rankings', { cache: 'no-store' });
|
|
const data = await resp.json();
|
|
totalCount.textContent = '共 ' + data.total + ' 次测试';
|
|
renderRanking(data[rankType] || []);
|
|
} catch (e) {
|
|
totalCount.textContent = '排行榜加载失败';
|
|
}
|
|
}
|
|
|
|
function renderRanking(rows) {
|
|
thSpeed.textContent = SPEED_HEAD[rankType];
|
|
if (!rows.length) {
|
|
rankBody.innerHTML = '<tr><td colspan="4" class="empty">暂无数据，快来测速抢占榜首！</td></tr>';
|
|
return;
|
|
}
|
|
rankBody.innerHTML = rows.map((r, i) => {
|
|
const cls = i === 0 ? 'top1' : i === 1 ? 'top2' : i === 2 ? 'top3' : '';
|
|
let speed;
|
|
if (rankType === 'latency') {
|
|
speed = '<span class="speed-val" style="color:var(--green)">' + r.latency_ms.toFixed(1) + '</span> ms';
|
|
} else if (rankType === 'download') {
|
|
speed = '<span class="speed-val" style="color:var(--accent1)">' + r.download_mbps.toFixed(2) + '</span> Mbps';
|
|
} else {
|
|
speed = '<span class="speed-val" style="color:var(--accent2)">' + r.upload_mbps.toFixed(2) + '</span> Mbps';
|
|
}
|
|
return '<tr>' +
|
|
'<td><span class="rank-no ' + cls + '">' + (i + 1) + '</span></td>' +
|
|
'<td class="ip">' + r.client_ip + '</td>' +
|
|
'<td>' + speed + '</td>' +
|
|
'<td class="time">' + r.created_at + '</td>' +
|
|
'</tr>';
|
|
}).join('');
|
|
}
|
|
|
|
document.querySelectorAll('.tab').forEach(tab => {
|
|
tab.addEventListener('click', () => {
|
|
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
|
|
tab.classList.add('active');
|
|
rankType = tab.dataset.type;
|
|
loadRankings();
|
|
});
|
|
});
|
|
|
|
/* ================= 主流程 ================= */
|
|
function markDone(el) {
|
|
el.classList.add('done');
|
|
}
|
|
|
|
async function runTest() {
|
|
if (running) return;
|
|
running = true;
|
|
startBtn.disabled = true;
|
|
startBtn.textContent = '测速中…';
|
|
['cardLatency', 'cardJitter', 'cardDownload', 'cardUpload'].forEach(id => document.getElementById(id).classList.remove('done'));
|
|
['statLatency', 'statJitter', 'statDownload', 'statUpload'].forEach(id => document.getElementById(id).textContent = '--');
|
|
drawGauge(0);
|
|
|
|
try {
|
|
// 1. 延迟
|
|
setPhase('延迟测试中（10 次 ping）…');
|
|
const { latency, jitter } = await pingTest(10);
|
|
statLatency.textContent = latency.toFixed(1);
|
|
statJitter.textContent = jitter.toFixed(1);
|
|
markDone(document.getElementById('cardLatency'));
|
|
markDone(document.getElementById('cardJitter'));
|
|
|
|
// 2. 下载
|
|
setPhase('下载测速准备中…');
|
|
const download = await downloadTest();
|
|
statDownload.textContent = download.toFixed(2);
|
|
updateGaugeSpeed(download);
|
|
markDone(document.getElementById('cardDownload'));
|
|
|
|
// 3. 上传
|
|
setPhase('上传测速准备中…');
|
|
const upload = await uploadTest();
|
|
statUpload.textContent = upload.toFixed(2);
|
|
updateGaugeSpeed(upload);
|
|
markDone(document.getElementById('cardUpload'));
|
|
|
|
// 4. 提交
|
|
setPhase('正在提交结果…');
|
|
await submitResult({ latency, jitter, download, upload });
|
|
await loadRankings();
|
|
setPhase('✅ 测试完成，结果已记录');
|
|
} catch (e) {
|
|
console.error(e);
|
|
setPhase('⚠ 测试中断：' + e.message);
|
|
} finally {
|
|
running = false;
|
|
startBtn.disabled = false;
|
|
startBtn.textContent = '再次测速';
|
|
}
|
|
}
|
|
|
|
startBtn.addEventListener('click', runTest);
|
|
|
|
/* ================= 初始化 ================= */
|
|
drawGauge(0);
|
|
loadRankings();
|
|
</script>
|
|
</body>
|
|
</html>
|