如何实现按下键盘E键时增加倒计时时长？

先看修改后的完整代码：

JavaScript 代码 #

// 初始时间和延长时长改为数字类型，避免字符串运算问题
var generalTime = 12;
var extendTime = 5;
// 将定时器变量提升为全局，方便E键事件中访问
var downloadTimer;

document.addEventListener('keydown',function(e){
    // 按下Enter键启动倒计时
    if(e.keyCode === 13){
        // 防止重复点击Enter创建多个定时器，先清掉之前的
        if(downloadTimer) clearInterval(downloadTimer);
        
        downloadTimer = setInterval(function(){
            if(generalTime <= 0){
                clearInterval(downloadTimer);
                document.getElementsByClassName("quote")[0].innerHTML = "Finished";
            } else {
                document.getElementsByClassName("quote")[0].innerHTML = generalTime;
                // 时间在3-5秒时变红，否则恢复默认颜色
                if(generalTime <= 5 && generalTime >= 3){
                    document.getElementsByClassName("quote")[0].style.color = "red";
                } else {
                    document.getElementsByClassName("quote")[0].style.color = "";
                }
            }
            generalTime -= 1;
        }, 1000);
    }
    // 按下E键增加倒计时时长
    else if(e.keyCode === 69){
        generalTime += extendTime;
        // 立即更新页面显示当前时间
        document.getElementsByClassName("quote")[0].innerHTML = generalTime;
        // 如果时间超过5，恢复默认颜色
        if(generalTime > 5){
            document.getElementsByClassName("quote")[0].style.color = "";
        }
    }
})

HTML 代码 #

<div class="boxOne">
    <div class="content">
        <p class="quote">Start</p>
    </div>
</div>

关键修改说明 #

• 把初始的时间变量从字符串改成数字：原来的"12"和"5"换成12和5，避免字符串减法出现意外结果
• 全局声明downloadTimer：这样按下E键时能确认定时器状态，也防止重复按Enter创建多个定时器
• 新增E键（keyCode=69）的处理逻辑：按下时给总时间加延长时长，同时立刻更新页面显示
• 补充了颜色重置逻辑：当时间跳出3-5秒区间时，把文字颜色恢复默认，避免一直保持红色

内容的提问来源于stack exchange，提问作者Khaled Ahmed Mithun