JavaScript 10秒点击计数游戏：优化计数停止逻辑与多试验存储需求

嘿，我来帮你搞定这两个问题！咱们一步步来优化你的代码～

一、更优雅的计时结束停止计数方案 #

你现在用禁用按钮的方式虽然能生效，但体验上有点生硬，而且不利于后续试验的重置。咱们可以用状态标记的方式来控制计数是否允许：

• 新增一个全局变量isCountingAllowed，初始设为false，表示一开始不允许计数
• 第一次点击（或按空格）时，启动计时器的同时把这个变量设为true
• 计时结束后，把isCountingAllowed设为false，这样后续的点击/空格操作就不会触发计数了
• 这种方式不用禁用按钮，还能方便后续试验重置时重新开启计数权限

二、实现10次试验（左右手各5次）的功能 #

咱们需要跟踪当前试验的进度，还要把每次的结果存入trials并更新表格：

• 新增两个状态变量：currentHand（记录当前是左手还是右手，初始'left'）、currentTrial（记录当前是第几次试验，初始1）
• 每次计时结束后，把当前的点击数存入trials对应位置
• 然后更新表格中对应的单元格内容
• 接着判断是否需要切换手或试验次数：如果当前是左手第5次，就切换到右手第1次；如果是右手第5次，试验全部结束；否则试验次数+1
• 最后重置计数器和计时器，准备下一次试验

完整优化后的代码 #

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <style>
        #btn{
            height:30px;
            width:100px;
        }
        tr, th, td{
            border:1px solid black;
            padding:5px;
        }
    </style>
</head>
<body>
    <span id="timer"></span> seconds<br>
    <input id="btn" type="submit" value="Click Me">
    <span id="result"></span><br>
    <p>当前试验：<span id="currentTrialInfo">左手 第1次</span></p>
    <br>
    <table id="trialsTable">
        <tr>
            <th>hand</th>
            <th>trial 1</th>
            <th>trial 2</th>
            <th>trial 3</th>
            <th>trial 4</th>
            <th>trial 5</th>
        </tr>
        <tr>
            <th>left</th>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th>right</th>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

    <script>
        // 试验数据存储
        var trials = { 
            left:{ trial_1:0, trial_2:0, trial_3:0, trial_4:0, trial_5:0 }, 
            right:{ trial_1:0, trial_2:0, trial_3:0, trial_4:0, trial_5:0 } 
        };
        var count_clicks = 0;
        // 计数状态标记：是否允许计数
        var isCountingAllowed = false;
        // 当前试验进度
        var currentHand = 'left';
        var currentTrial = 1;

        function startTimer() {
            var timeLeft = 10;
            $("#timer").text(timeLeft);
            var interval = setInterval(function(){
                timeLeft--;
                $("#timer").text(timeLeft);
                if(timeLeft <= 0){
                    clearInterval(interval);
                    // 计时结束，禁止计数
                    isCountingAllowed = false;
                    // 保存当前试验结果
                    saveTrialResult();
                    // 准备下一次试验
                    prepareNextTrial();
                }
            }, 1000);
        }

        // 保存当前试验结果到trials并更新表格
        function saveTrialResult() {
            var trialKey = `trial_${currentTrial}`;
            trials[currentHand][trialKey] = count_clicks;
            // 更新表格：找到对应行和列的单元格
            var rowIndex = currentHand === 'left' ? 1 : 2;
            var colIndex = currentTrial;
            $("#trialsTable tr").eq(rowIndex).find('td').eq(colIndex - 1).text(count_clicks);
        }

        // 准备下一次试验
        function prepareNextTrial() {
            // 重置计数器
            count_clicks = 0;
            $("#result").text(count_clicks);
            $("#timer").text('');

            // 更新试验进度
            if(currentHand === 'left' && currentTrial === 5){
                // 左手试验完成，切换到右手
                currentHand = 'right';
                currentTrial = 1;
            } else if(currentHand === 'right' && currentTrial === 5){
                // 所有试验完成
                $("#currentTrialInfo").text('所有试验已完成！');
                $("#btn").prop('disabled', true);
                return;
            } else {
                // 同一只手的下一次试验
                currentTrial++;
            }
            // 更新试验信息显示
            $("#currentTrialInfo").text(`${currentHand === 'left' ? '左手' : '右手'} 第${currentTrial}次`);
        }

        // 按钮点击事件
        $("#btn").on("click",function(){
            if(!isCountingAllowed){
                // 第一次点击，启动计时器并允许计数
                isCountingAllowed = true;
                startTimer();
            }
            // 只有允许计数时才累加
            if(isCountingAllowed){
                count_clicks++;
                $("#result").text(count_clicks);
            }
        });

        // 空格键触发点击
        document.body.onkeyup = function(e){
            if (e.keyCode == 32){
                $("#btn").click();
                return false;
            }
        }
    </script>
</body>
</html>

代码说明 #

1. 状态控制计数：通过isCountingAllowed变量精准控制是否允许计数，比禁用按钮更灵活，试验重置时直接把这个变量设为false即可，不用操作按钮状态
2. 试验进度跟踪：用currentHand和currentTrial跟踪当前试验，每次结束后自动切换，直到所有10次试验完成
3. 数据持久化与展示：每次试验结束后自动把结果存入trials对象，并更新到表格对应的单元格里，直观展示所有试验数据
4. 用户体验优化：新增了当前试验信息的显示，让用户清楚知道自己正在进行哪一次试验，所有试验完成后才禁用按钮

内容的提问来源于stack exchange，提问作者Amit Soni