如何在计时器到00:00时停止计数并禁用图片点击？

核心问题分析 #

1. timeLeft是startTimer函数内部的局部变量，blobPress无法访问该变量，导致判断点击权限的条件完全失效
2. 倒计时结束后未对图片的点击事件做处理，因此即使时间到了，仍然可以继续点击计数

修改方案 #

1. 新增全局状态变量控制点击权限

在全局变量区域添加一个标记变量，直接控制是否允许点击图片：

let alarm = new Audio('alarm.mp3');
let finish = new Audio('finish.mp3');
let timerStarted = false;
let count = 0;
let isClickAllowed = false; // 新增：标记是否允许点击图片

2. 修改startTimer函数

在计时开始时开启点击权限，倒计时结束时关闭权限并移除图片的点击事件：

function startTimer() {
  if (!timerStarted) {
    let startTime = new Date().getTime();
    let thirtySeconds = 1000 * 30;
    let endTime = startTime + thirtySeconds;
    alarm.play();

    isClickAllowed = true; // 开始计时，允许点击
    const blob = document.getElementById('blob');
    
    let refreshInterval = setInterval(function() {
      let timeLeft = endTime - new Date().getTime();

      if (timeLeft > 0) {
        let minutes = timeLeft / (1000 * 60);
        minutes = Math.floor(minutes);
        let seconds = (timeLeft / 1000) % 60;
        seconds = Math.round(seconds);
        seconds = ('0' + seconds).slice(-2);
        let text = '0' + minutes + ' : ' + seconds;
        timer.innerHTML = text;
      } else {
        finish.play();
        timer.innerHTML = '00 : 00';
        clearInterval(refreshInterval);
        isClickAllowed = false; // 关闭点击权限
        blob.removeAttribute('onclick'); // 移除图片的点击事件，彻底禁止触发计数
        // 可选：添加样式让图片看起来不可点击
        // blob.style.opacity = '0.5';
        // blob.style.pointerEvents = 'none';
      }
    }, 1000);
    timerStarted = true;
  }
}

3. 修改blobPress函数

基于全局状态变量判断是否执行计数逻辑：

function blobPress() {
  if (isClickAllowed) {
    count++;
    document.getElementById("count").innerHTML = count;
  }
}

效果验证 #

• 点击开始按钮后，图片可正常点击计数，倒计时正常运行
• 倒计时到00:00时，图片的点击事件被移除，无法再触发计数，最终的count值会保留，可直接用于排行榜功能

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