HTML 反应速度测试工具- 编程源码 -卓越飞翔博客

游戏规则：
1. 初始页面为白色背景，显示游戏规则。
2. 点击屏幕后，背景变为红色，随机等待1至3秒后变为绿色。
3. 当背景变为绿色时，玩家需尽快点击屏幕。
4. 点击后，页面显示本次反应时间，并更新统计信息。
5. 只统计最近10次的测试记录。

以下是HTML代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>反应速度测试</title>
    <link rel="icon" type="image/svg+xml" href="https://pic1.imgdb.cn/item/67b91a2cd0e0a243d401b0f9.png">
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-family: Arial, sans-serif;
            text-align: center;
            cursor: pointer;
            user-select: none;
        }
        #message {
            font-size: 24px;
            color: black;
            margin-bottom: 20px;
            padding: 0 20px;
            max-width: 600px;
        }
        #stats {
            font-size: 18px;
            color: black;
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            white-space: nowrap;
        }
        #chart {
            position: fixed;
            bottom: 5%;
            left: 50%;
            transform: translateX(-50%);
            width: 50%;
            height: 140px;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            gap: 12px;
            overflow-x: auto;
            padding: 10px 0;
        }
        .bar-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            min-width: 40px;
        }
        .bar {
            width: 25px;
            background: linear-gradient(to top, #333, #000);
            border-radius: 3px 3px 0 0;
            transition: height 0.3s ease;
        }
        .bar-label {
            font-size: 12px;
            color: #666;
            text-align: center;
            white-space: nowrap;
        }
 
        @media (max-width: 600px) {
            .bar-label {
                writing-mode: vertical-rl;
                transform: rotate(180deg);
                line-height: 1;
                white-space: nowrap;
            }
            .bar-container {
                min-width: 30px;
                gap: 4px;
            }
        }
    </style>
</head>
<body>
    <div id="message">
        欢迎来到反应速度测试！<br><br>
        点击屏幕开始测试，当背景变为绿色时，立即点击屏幕。<br><br>
        准备好了吗？点击屏幕任意位置开始！
    </div>
    <div id="chart"></div>
    <div id="stats"></div>
 
    <script>
        let startTime;
        let timeoutId;
        let isTestRunning = false;
        let reactionTimes = []; // 存储最近10次测试记录
 
        function startTest() {
            isTestRunning = true;
            document.body.style.backgroundColor = 'red';
            document.getElementById('message').innerHTML = '请耐心等待背景变为绿色...<br><br>别急，变色后再点击哦！';
            const randomTime = Math.random() * 2000 + 1000;
            timeoutId = setTimeout(() => {
                document.body.style.backgroundColor = 'green';
                startTime = Date.now();
            }, randomTime);
        }
 
        function endTest() {
            if (document.body.style.backgroundColor === 'green') {
                const endTime = Date.now();
                const reactionTime = endTime - startTime;
                reactionTimes.push(reactionTime);
 
                // 保留最近10次测试记录
                reactionTimes = reactionTimes.slice(-10); // 优化点：只保留最近10次记录
 
                let feedback = '';
                if (reactionTime < 200) {
                    feedback = '太快了！你是不是提前点击了？';
                } else if (reactionTime < 300) {
                    feedback = '太棒了！你的反应速度非常快！';
                } else if (reactionTime < 500) {
                    feedback = '不错！继续保持！';
                } else {
                    feedback = '可以再快一点哦！';
                }
 
                const fastest = Math.min(...reactionTimes);
                const slowest = Math.max(...reactionTimes);
                const average = (reactionTimes.reduce((a, b) => a + b, 0) / reactionTimes.length).toFixed(2);
 
                document.getElementById('message').innerHTML = `反应时间：${reactionTime}ms<br><br>${feedback}<br><br>点击屏幕任意位置，重新开始测试`;
                document.getElementById('stats').innerText = `最快：${fastest}ms | 最慢：${slowest}ms | 平均：${average}ms`;
                updateChart();
            } else {
                clearTimeout(timeoutId);
                document.body.style.backgroundColor = 'white';
                document.getElementById('message').innerHTML = '哎呀，点得太早啦！<br><br>请等待背景变为绿色后再点击哦！<br><br>点击屏幕任意位置重新开始测试。';
                isTestRunning = false;
                return;
            }
            document.body.style.backgroundColor = 'white';
            isTestRunning = false;
        }
 
        function updateChart() {
            const chart = document.getElementById('chart');
            chart.innerHTML = '';
            const maxReactionTime = Math.max(...reactionTimes);
            const minHeight = 10;
 
            // 仅遍历最近10次测试记录
            reactionTimes.slice(-10).forEach(time => {
                const container = document.createElement('div');
                container.className = 'bar-container';
 
                const bar = document.createElement('div');
                bar.className = 'bar';
                const barHeight = Math.max((time / maxReactionTime) * 100, minHeight);
                bar.style.height = `${barHeight}px`;
 
                const label = document.createElement('div');
                label.className = 'bar-label';
                label.textContent = `${time}ms`;
 
                container.appendChild(bar);
                container.appendChild(label);
                chart.appendChild(container);
            });
 
            // 自动滚动到最新结果
            chart.scrollTo({
                left: chart.scrollWidth,
                behavior: 'smooth'
            });
        }
 
        document.body.addEventListener('click', () => {
            if (!isTestRunning) {
                startTest();
            } else {
                endTest();
            }
        });
    </script>
</body>
</html>
相关推荐
