<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>反应速度测试工具</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3b82f6',
secondary: '#10b981',
accent: '#f59e0b'
}
}
}
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
min-height: 100vh;
margin: 0;
padding: 0;
}
.pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.reaction-box {
transition: all 0.3s ease;
}
.reaction-box:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body class="min-h-screen flex items-center justify-center p-4">
<div class="w-full max-w-4xl bg-white rounded-2xl shadow-xl overflow-hidden">
<!-- 头部 -->
<div class="bg-gradient-to-r from-primary to-secondary p-6 text-white text-center">
<h1 class="text-3xl md:text-4xl font-bold mb-2 flex items-center justify-center gap-3">
<i class="fas fa-bolt"></i>
反应速度测试工具
</h1>
<p class="opacity-90">测试你的反应速度，看看你有多快！</p>
</div>
<!-- 主要内容区域 -->
<div class="p-6 md:p-8">
<!-- 状态显示区 -->
<div class="mb-8">
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
<div class="bg-blue-50 rounded-lg p-4 text-center border border-blue-100">
<div class="text-sm text-blue-600 font-medium">平均反应时间</div>
<div id="avg-time" class="text-2xl font-bold text-blue-700">0 ms</div>
</div>
<div class="bg-green-50 rounded-lg p-4 text-center border border-green-100">
<div class="text-sm text-green-600 font-medium">最佳成绩</div>
<div id="best-time" class="text-2xl font-bold text-green-700">0 ms</div>
</div>
<div class="bg-purple-50 rounded-lg p-4 text-center border border-purple-100">
<div class="text-sm text-purple-600 font-medium">测试次数</div>
<div id="test-count" class="text-2xl font-bold text-purple-700">0</div>
</div>
</div>
<!-- 控制按钮 -->
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
<button id="start-btn" class="bg-primary hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full transition-all duration-300 flex items-center gap-2 shadow-lg hover:shadow-xl">
<i class="fas fa-play"></i>
开始测试
</button>
<button id="reset-btn" class="bg-gray-200 hover:bg-gray-300 text-gray-700 font-bold py-3 px-8 rounded-full transition-all duration-300 flex items-center gap-2">
<i class="fas fa-redo"></i>
重置数据
</button>
</div>
</div>
<!-- 测试区域 -->
<div class="mb-8">
<div class="text-center mb-6">
<h2 class="text-xl font-semibold text-gray-700 mb-2">准备好了吗？</h2>
<p class="text-gray-500">当屏幕变色时，立即点击按钮</p>
</div>
<div class="flex justify-center">
<div id="reaction-box" class="reaction-box w-64 h-64 rounded-2xl flex items-center justify-center cursor-pointer border-4 border-gray-200 transition-all duration-300">
<div class="text-center p-4">
<i class="fas fa-hourglass-half text-gray-400 text-4xl mb-3"></i>
<p class="text-gray-500 font-medium">点击开始测试</p>
</div>
</div>
</div>
</div>
<!-- 历史记录 -->
<div class="mt-8">
<h3 class="text-lg font-semibold text-gray-700 mb-4 flex items-center gap-2">
<i class="fas fa-history"></i>
测试历史记录
</h3>
<div id="history-list" class="bg-gray-50 rounded-lg p-4 max-h-60 overflow-y-auto">
<div class="text-center text-gray-500 py-8">
<i class="fas fa-chart-line text-3xl mb-3"></i>
<p>还没有测试记录</p>
</div>
</div>
</div>
</div>
<!-- 底部信息 -->
<div class="bg-gray-50 px-6 py-4 text-center text-sm text-gray-500 border-t">
<p>反应速度测试工具 - 准确测量您的反应能力</p>
</div>
</div>
<script>
// 全局变量
let reactionTimes = [];
let startTime = 0;
let waitingTime = 0;
let isWaiting = false;
let testCount = 0;
let bestTime = Infinity;
// DOM 元素
const startBtn = document.getElementById('start-btn');
const resetBtn = document.getElementById('reset-btn');
const reactionBox = document.getElementById('reaction-box');
const avgTimeEl = document.getElementById('avg-time');
const bestTimeEl = document.getElementById('best-time');
const testCountEl = document.getElementById('test-count');
const historyList = document.getElementById('history-list');
// 初始化
function init() {
updateStats();
setupEventListeners();
}
// 设置事件监听器
function setupEventListeners() {
startBtn.addEventListener('click', startTest);
resetBtn.addEventListener('click', resetData);
reactionBox.addEventListener('click', handleReaction);
}
// 开始测试
function startTest() {
if (isWaiting) return;
// 重置状态
reactionBox.classList.remove('bg-red-500', 'bg-green-500');
reactionBox.classList.add('bg-gray-200');
reactionBox.innerHTML = '<div class="text-center p-4"><i class="fas fa-hourglass-half text-gray-400 text-4xl mb-3"></i><p class="text-gray-500 font-medium">等待变色...</p></div>';
// 随机延迟时间（1-5秒）
waitingTime = Math.floor(Math.random() * 4000) + 1000;
isWaiting = true;
setTimeout(() => {
if (isWaiting) {
// 变成红色，准备测试
reactionBox.classList.remove('bg-gray-200');
reactionBox.classList.add('bg-red-500');
reactionBox.innerHTML = '<div class="text-center p-4"><i class="fas fa-bolt text-white text-4xl mb-3"></i><p class="text-white font-bold">点击！</p></div>';
// 记录开始时间
startTime = Date.now();
}
}, waitingTime);
}
// 处理反应
function handleReaction() {
if (!isWaiting) return;
const reactionTime = Date.now() - startTime;
// 添加到历史记录
reactionTimes.push(reactionTime);
testCount++;
// 更新最佳成绩
if (reactionTime < bestTime) {
bestTime = reactionTime;
}
// 更新统计信息
updateStats();
// 显示结果
reactionBox.classList.remove('bg-red-500');
reactionBox.classList.add('bg-green-500');
reactionBox.innerHTML = `<div class="text-center p-4"><i class="fas fa-check-circle text-white text-4xl mb-3"></i><p class="text-white font-bold">${reactionTime} ms</p></div>`;
// 添加到历史记录列表
addToHistory(reactionTime);
// 重置状态
isWaiting = false;
// 2秒后自动开始下一轮
setTimeout(() => {
startTest();
}, 2000);
}
// 更新统计数据
function updateStats() {
// 平均值
let avg = 0;
if (reactionTimes.length > 0) {
const sum = reactionTimes.reduce((a, b) => a + b, 0);
avg = Math.round(sum / reactionTimes.length);
}
avgTimeEl.textContent = `${avg} ms`;
bestTimeEl.textContent = `${bestTime === Infinity ? 0 : bestTime} ms`;
testCountEl.textContent = testCount;
}
// 添加到历史记录
function addToHistory(time) {
const historyItem = document.createElement('div');
historyItem.className = 'flex justify-between items-center py-2 border-b border-gray-100 last:border-b-0';
historyItem.innerHTML = `
<span class="text-gray-600">第${testCount}次测试</span>
<span class="font-semibold text-primary">${time} ms</span>
`;
// 插入到顶部
if (historyList.querySelector('.text-center')) {
historyList.innerHTML = '';
}
historyList.insertBefore(historyItem, historyList.firstChild);
}
// 重置数据
function resetData() {
reactionTimes = [];
testCount = 0;
bestTime = Infinity;
// 重置界面
reactionBox.classList.remove('bg-red-500', 'bg-green-500');
reactionBox.classList.add('bg-gray-200');
reactionBox.innerHTML = '<div class="text-center p-4"><i class="fas fa-hourglass-half text-gray-400 text-4xl mb-3"></i><p class="text-gray-500 font-medium">点击开始测试</p></div>';
updateStats();
// 清空历史记录
historyList.innerHTML = `
<div class="text-center text-gray-500 py-8">
<i class="fas fa-chart-line text-3xl mb-3"></i>
<p>还没有测试记录</p>
</div>
`;
}
// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', init);
</script>
</body>
</html>
index.html
index.html