html测试你的反应速度
效果预览：http://sjd039.top
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试你的反应速度</title>
<style>
* {
user-select: none;
margin: 0;
padding: 0;
margin: 0 auto;
}
</style>
</head>
<body>
<h1>测试你的反应速度</h1>
<p style="font-size: 26px; font-weight: bold;">成绩：<span id="scoreV">0000</span>ms</p>
<div>
按住屏幕（键盘）开始，当背景颜色变红的时候松开屏幕（键盘）。
</div>
</body>
<script>
var body = document.getElementsByTagName('body')[0];
var scoreV = document.getElementById('scoreV');
var startTime = 0;
var endTime;
body.style.backgroundColor = "rgb(255, 255, 255)";
window.onkeydown = function () {
if (body.style.backgroundColor != "rgb(255, 255, 255)") {
return;
}
gameStart();
}
window.ontouchstart = function () {
if (body.style.backgroundColor != "rgb(255, 255, 255)") {
return;
}
gameStart();
}
window.onkeyup = function () {
if (startTime == 0) {
return;
}
gameEnd();
}
window.ontouchend = function () {
if (startTime == 0) {
return;
}
gameEnd();
}
function gameStart() {
body.style.backgroundColor = "#39c5bb";
setTimeout(() => {
body.style.backgroundColor = "#FFC0CB";
startTime = new Date().getTime();
}, 2000 + (Math.random() * 4000));
}
function gameEnd() {
endTime = new Date().getTime();
scoreV.innerText = endTime - startTime;
startTime = 0;
endTime = 0;
body.style.backgroundColor = "rgb(255, 255, 255)";
}
// 白色代表游戏未开始，
// 绿色代表游戏开始等待状态，
// 红色代表游戏开始评分状态。
</script>
</html>
