欢迎使用上海电信测速平台！本平台可以帮助您快速准确地测试您的网络速度。
CSS样式
css
body {font-family: Arial, Helvetica, sans-serif;
}h1 {font-size: 24px;margin-bottom: 10px;
}p {font-size: 14px;margin-bottom: 10px;
}test-container {text-align: center;
}start-test-button {background-color: 008CBA;color: fff;padding: 10px 20px;border: none;border-radius: 5px;cursor: pointer;
}results-container {display: flex;justify-content: center;align-items: center;flex-direction: column;padding: 20px;border: 1px solid 008CBA;border-radius: 5px;margin-top: 10px;
}results-container p {font-size: 16px;
margin-bottom: 10px;
}JavaScript脚本
javascript
const startTestButton = document.getElementById("start-test-button");
const resultsContainer = document.getElementById("results-container");
const downloadSpeedElement = document.getElementById("download-speed");
const uploadSpeedElement = document.getElementById("upload-speed");
const pingElement = document.getElementById("ping");startTestButton.addEventListener("click", () => {startTestButton.disabled = true;const testStartTime = Date.now();fetch("https://speed.hetzner.de/100MB.bin").then((response) => response.blob()).then((blob) => {const testEndTime = Date.now();const downloadTime = (testEndTime - testStartTime) / 1000; // secondsconst downloadSpeed = (blob.size / downloadTime) / 1024 / 1024; // MbpsdownloadSpeedElement.innerHTML = `下载速度：${downloadSpeed.toFixed(2)} Mbps`;return fetch("https://speed.hetzner.de/upload")}).then((response) => response.blob()).then((blob) => {const testEndTime = Date.now();const uploadTime = (testEndTime - testStartTime) / 1000; // secondsconst uploadSpeed = (blob.size / uploadTime) / 1024 / 1024; // MbpsuploadSpeedElement.innerHTML = `上传速度：${uploadSpeed.toFixed(2)} Mbps`;return fetch("https://www.google.com")}).then((response) => {const testEndTime = Date.now();const ping = testEndTime - testStartTime; // millisecondspingElement.innerHTML = `Ping：${ping} ms`;resultsContainer.style.display = "block";}).catch((error) => {alert("测速失败，请稍后再试。");});
});
