console 命令行工具 X clear
console
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网络状态和延迟测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
        }
        #status {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <h1>网络状态和延迟测试</h1>
    <div id="status">正在检查网络状态...</div>
    <button onclick="testNetwork()">测试网络</button>

    <script>
        function testNetwork() {
            const statusDiv = document.getElementById('status');
            statusDiv.innerHTML = '正在测试网络状态...';

            // 检查用户是否在线或离线
            if (navigator.onLine) {
                statusDiv.innerHTML = '您当前在线。';
                // 通过从服务器获取一个小资源来测量延迟
                const startTime = Date.now();
                fetch(`https://www.google.com/favicon.ico?t=${new Date().getTime()}`) // 添加随机参数避免缓存
                    .then(response => {
                        const endTime = Date.now();
                        const latency = endTime - startTime;
                        statusDiv.innerHTML += `<br>延迟: ${latency} ms`;
                    })
                    .catch(error => {
                        statusDiv.innerHTML = '测试网络时出错，请检查您的连接。';
                    });
            } else {
                statusDiv.innerHTML = '您当前离线。';
            }
        }
    </script>
</body>
</html>