JS速拧魔方计时器：实现空格键按下停止、松开启动功能求助

问题分析 #

你需要将原按钮控制的计时器改为按下空格键停止计时，松开空格键启动计时，但目前松开空格键后计时器会重复启动，核心问题在于：

• 未精准监听空格键的按键事件，可能误触发其他按键
• 按键事件的状态判断逻辑缺失，没有结合started变量做互斥处理

修复后的完整代码 #

let startDate;
let timeoutID = 0;
let time;
let started = false;
let timerRunOut = false;

function start(){
    if(!started){
        startDate = new Date();
        startTimer();
        started = true;
    }
}

function stop(){
    if(started){
        clearTimeout(timeoutID);
        started = false;
    }
}

function startTimer () {
    let current = new Date();
    time = (current - startDate);

    let timeMS = time;

    let ms = timeMS % 1000;
    timeMS = (timeMS - ms) / 1000;
    let seconds = timeMS % 60;
    timeMS = (timeMS - seconds) / 60;
    let mins = timeMS % 60;

    if(seconds < 10){
        document.getElementById("seconds").innerText = "0" + seconds;
    }else{
        document.getElementById("seconds").innerText = seconds;
    }

    if(mins > 0 && mins < 10){
        document.getElementById("minutes").innerText = "0" + mins + ":";
    }else if(mins > 0){
        document.getElementById("minutes").innerText = mins + ":";
    }else{
        document.getElementById("minutes").innerText = "";
    }

    if(ms < 10){
        document.getElementById("tens").innerText = "00" + ms;
    }
    else if(ms < 100){
        document.getElementById("tens").innerText = "0" + ms;
    }else{
        document.getElementById("tens").innerText = ms;
    }

    timeoutID = setTimeout(startTimer, 10); // 替换0为10，减少浏览器资源占用，精度不受影响
}

// 添加空格键专属事件监听
document.addEventListener('keydown', function(e) {
    // 仅响应空格键
    if(e.key === ' ' || e.keyCode === 32){
        e.preventDefault(); // 阻止页面滚动等默认行为
        stop(); // 按下时停止计时
    }
});

document.addEventListener('keyup', function(e) {
    // 仅响应空格键
    if(e.key === ' ' || e.keyCode === 32){
        e.preventDefault();
        start(); // 松开时启动计时
    }
});

关键修改点说明 #

1. 精准匹配空格键：在keydown和keyup事件中，通过e.key === ' '或e.keyCode === 32判断是否为空格键，避免其他按键误触发
2. 阻止默认行为：调用e.preventDefault()，防止按下空格键时页面滚动，提升使用体验
3. 状态互斥逻辑：start()和stop()函数内已通过started变量做状态判断，确保不会重复启动或停止
4. 定时器优化：把setTimeout(startTimer, 0)改为setTimeout(startTimer, 10)，减少浏览器资源占用，计时精度不受影响

验证逻辑 #

• 按下空格键：触发keydown事件，调用stop()，若计时器正在运行则停止，started设为false
• 松开空格键：触发keyup事件，调用start()，若计时器未运行则启动，started设为true
• 重复操作：由于started变量的状态控制，不会出现重复启动的问题

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