html測(cè)試你的反應(yīng)速度
效果預(yù)覽：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>測(cè)試你的反應(yīng)速度</title>
? ? <style>
? ? ? ? * {
? ? ? ? ? ? user-select: none;
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? margin: 0 auto;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <h1>測(cè)試你的反應(yīng)速度</h1>
? ? <p style="font-size: 26px; font-weight: bold;">成績(jī)：<span id="scoreV">0000</span>ms</p>
? ? <div>
? ? ? ? 按住屏幕（鍵盤）開始，當(dāng)背景顏色變紅的時(shí)候松開屏幕（鍵盤）。
? ? </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)";
? ? }
// 白色代表游戲未開始，
// 綠色代表游戲開始等待狀態(tài)，
// 紅色代表游戲開始評(píng)分狀態(tài)。
</script>
</html>
