反应时间选择器 - Javascript

简介

本文将介绍一个基于Javascript实现的反应时间选择器。该选择器可用于测试用户反应时间，并提供了多种选项和自定义设置。

功能

• 提供多种测试反应时间的选项，包括颜色、字母、数字等不同类型。
• 设置反应时间测试的持续时间和间隔时间。
• 支持自定义选项，可以添加和删除测试选项。
• 显示测试结果，包括测试时间、正确率和平均反应时间。

代码实现

以下为本反应时间选择器的核心Javascript实现代码。

// 初始化参数
var options = ["红色", "蓝色", "黄色", "绿色"]; // 反应时间测试选项
var duration = 60; // 反应时间测试持续时间（秒）
var interval = 2000; // 反应时间测试间隔时间（毫秒）

var currentOption = ""; // 当前测试选项
var startTime = 0; // 开始测试时间
var responseTimes = []; // 反应时间记录

// 初始化元素
var optionsElement = document.getElementById("options");
var resultElement = document.getElementById("result");

// 初始化事件监听器
document.addEventListener("keydown", function(event) {
    if (event.key === "Enter") {
        checkResponseTime();
    }
});

// 开始测试
optionsElement.innerHTML = "";
startTimer();

function startTimer() {
    startTime = Date.now();
    var i = 0;
    var timer = setInterval(function() {
        if (i >= duration) {
            clearInterval(timer);
            displayResult();
            return;
        }
        displayOption();
        i++;
    }, interval);
}

// 显示测试选项
function displayOption() {
    currentOption = options[Math.floor(Math.random() * options.length)];
    optionsElement.innerHTML = currentOption;
}

// 记录反应时间
function checkResponseTime() {
    var responseTime = Date.now() - startTime;
    responseTimes.push(responseTime);
    displayOption();
}

// 显示测试结果
function displayResult() {
    var correctRate = Math.round((responseTimes.length / duration) * 100) + "%";
    var averageTime = Math.round(responseTimes.reduce((a, b) => a + b, 0) / responseTimes.length) + "ms";
    var resultHTML = "测试时间：" + duration + "秒<br />";
    resultHTML += "正确率：" + correctRate + "<br />";
    resultHTML += "平均反应时间：" + averageTime;
    resultElement.innerHTML = resultHTML;
}

使用方法

1. 在HTML文档中引入以上Javascript代码。
2. 在HTML文档中添加测试选项显示和测试结果显示的元素，分别使用ID为options和result。

<div id="options"></div>
<div id="result"></div>

3. 修改Javascript代码中的参数，以满足测试需求。如需要添加、删除测试选项，修改options数组；如需要修改持续时间和间隔时间，修改duration和interval变量。
4. 在浏览器中打开HTML文档，即可开始测试。