运行效果点击：
代码如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超级鹿手速反应测试器</title>
<style>
#reactionTester {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
transition: background-color 0.5s;
text-align: center;
padding: 20px;
box-sizing: border-box;
}
#reactionTester #header {
margin-bottom: 20px;
}
#reactionTester #header img {
width: 50%; /* 图片宽度设为原来的一半 */
}
#reactionTester #controls {
margin-bottom: 20px;
}
#reactionTester #startButton, #reactionTester #endButton {
padding: 20px;
font-size: 18px;
cursor: pointer;
border: none;
outline: none;
width: 100%;
max-width: 300px;
}
#reactionTester #endButton {
display: none;
}
#reactionTester #timer {
font-size: 24px;
margin-bottom: 20px;
}
#reactionTester #scores {
margin-top: 20px;
font-size: 18px;
width: 100%;
max-width: 300px;
}
#reactionTester #instructions {
margin-bottom: 20px;
font-size: 18px;
}
#reactionTester #footer {
margin-top: 20px;
font-size: 16px;
}
@media (max-width: 600px) {
#reactionTester #startButton, #reactionTester #endButton {
padding: 15px;
font-size: 16px;
}
#reactionTester #timer {
font-size: 20px;
}
#reactionTester #scores {
font-size: 16px;
}
#reactionTester #instructions {
font-size: 16px;
}
#reactionTester #footer {
font-size: 14px;
}
}
</style>
</head>
<body>
<div id="reactionTester">
<div id="header">
<a href="https://www.chaojilu.com" target="_blank">
<img src="https://www.chaojilu.com/wp-content/uploads/2024/06/logo604x144t.png" alt="超级鹿博客">
</a>
</div>
<div id="instructions">
点击“开始测试”按钮后，页面颜色会在随机时间后改变。<br>看到颜色变化后，尽快点击“结束测试”按钮，测量你的反应时间。
</div>
<div id="controls">
<button id="startButton">开始测试</button>
<button id="endButton">结束测试</button>
</div>
<div id="timer">0 ms</div>
<div id="scores">
<h2>最近五次的记录</h2>
<ul id="scoreList"></ul>
</div>
<div id="footer">
本页面由<a href="https://www.chaojilu.com" target="_blank">超级鹿博客</a>提供
</div>
</div>
<script>
let startButton = document.getElementById('startButton');
let endButton = document.getElementById('endButton');
let timerDisplay = document.getElementById('timer');
let scoreList = document.getElementById('scoreList');
let startTime, endTime, timerInterval;
let scores = [];
startButton.addEventListener('click', function() {
startButton.style.display = 'none';
endButton.style.display = 'block';
timerDisplay.textContent = '0 ms';
let randomTime = Math.floor(Math.random() * 5000) + 1000; // 1 to 6 seconds
setTimeout(function() {
document.body.style.backgroundColor = getRandomColor();
startTime = new Date();
timerInterval = setInterval(updateTimer, 10);
}, randomTime);
});
endButton.addEventListener('click', function() {
endTime = new Date();
clearInterval(timerInterval);
let reactionTime = endTime - startTime;
let evaluation = evaluateReactionTime(reactionTime);
alert('你的反应时间是 ' + reactionTime + ' 毫秒。' + evaluation);
document.body.style.backgroundColor = '';
startButton.style.display = 'block';
endButton.style.display = 'none';
// 记录得分和评价
scores.unshift({ time: reactionTime, evaluation: evaluation });
if (scores.length > 5) scores.pop();
updateScoreList();
});
function updateTimer() {
let currentTime = new Date();
timerDisplay.textContent = (currentTime - startTime) + ' ms';
}
function getRandomColor() {
let letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function updateScoreList() {
scoreList.innerHTML = '';
scores.forEach((score, index) => {
let listItem = document.createElement('li');
listItem.textContent = '第 ' + (index + 1) + ' 次: ' + score.time + ' ms - ' + score.evaluation;
scoreList.appendChild(listItem);
});
}
function evaluateReactionTime(reactionTime) {
if (reactionTime < 200) {
return '手速非常快，堪比火箭发射！';
} else if (reactionTime < 300) {
return '手速很快，表现优异！';
} else if (reactionTime < 500) {
return '手速不错，继续加油！';
} else if (reactionTime < 700) {
return '反应时间稍慢，可以更快！';
} else {
return '手速很慢，你的老蹄子该锻炼了！。';
}
}
</script>
</body>
</html>
原创文章，作者：鹿鹿不迷路，如若转载，请注明出处：https://www.chaojilu.com/jishu/html/238.html
微信扫一扫 
支付宝扫一扫
评论列表（1条）
这个可以！