如何用JavaScript实现点击鼠标或按键时重置计时器倒计时？

下面是针对你的需求的完整解决方案，包含代码修正、重置逻辑编写和事件部署：

核心修改要点 #

1. 修复原代码的变量冲突问题
2. 全局存储计时器实例，方便后续清除
3. 编写重置函数，实现状态恢复与倒计时重启
4. 绑定全局鼠标/键盘事件触发重置

完整代码 #

JavaScript 代码 #

let mins = document.getElementById("minutes");
let secs = document.getElementById("seconds");
let display = document.getElementById("display");
let start = document.getElementById("start");
let timer; // 全局存储计时器实例

function displaymin() {
  // 使用全局的mins/secs变量，避免和watch内的局部变量冲突
  display.innerHTML =
    (mins.value > 9 ? mins.value : "0" + mins.value) +
    ":" +
    (secs.value > 9 ? secs.value : "0" + secs.value);
}

function watch() {
  start.disabled = true;
  mins.disabled = true;
  secs.disabled = true;
  
  var date1 = new Date();
  var countDownDate = new Date();
  countDownDate.setTime(
    date1.getTime() +
    mins.value * 60 * 1000 +
    secs.value * 1000 +
    1 * 1000
  );

  // 将计时器实例存入全局变量timer
  timer = setInterval(function() {
    var now = new Date().getTime();
    var distance = countDownDate - now;

    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    display.innerHTML =
      (minutes > 9 ? minutes : "0" + minutes) +
      ":" +
      (seconds > 9 ? seconds : "0" + seconds);

    var audio = new Audio("alarm.mp3");

    if (display.innerHTML == "00:00") {
      clearInterval(timer);
      audio.play();
      // 计时结束后恢复控件可操作状态
      start.disabled = false;
      mins.disabled = false;
      secs.disabled = false;
    }
  }, 1000);
}

// 重置计时器函数
function resetTimer() {
  // 清除当前运行的计时器
  if (timer) {
    clearInterval(timer);
  }
  // 恢复所有控件的可操作状态
  start.disabled = false;
  mins.disabled = false;
  secs.disabled = false;
  // 重置显示为初始设置的时间
  displaymin();
  // 自动重启倒计时，若不需要自动启动可删除此行
  watch();
}

// 页面加载完成后绑定全局事件
document.addEventListener('DOMContentLoaded', function() {
  // 鼠标点击任意位置触发重置
  document.onmouseup = resetTimer;
  // 按下任意键盘按键触发重置
  document.onkeyup = resetTimer;
});

HTML 代码 #

<div oninput="displaymin()">
  <input type="number" id="minutes" min="0" max="59" placeholder="mins" /> :
  <input type="number" id="seconds" min="0" max="59" placeholder="secs" />
</div>
<div id="display"></div>
<div>
  <button id="start" onclick="watch()">Start</button>
</div>

关键说明 #

• 解决了原代码中全局变量与局部变量的命名冲突问题，避免逻辑异常
• 重置函数可根据需求调整：如果不需要自动重启倒计时，删除resetTimer里的watch()调用即可
• 事件绑定在DOMContentLoaded回调中，确保页面元素加载完成后再执行绑定，避免找不到元素的错误

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