如果计时器到达 00:00，如何停止计数？

Question

我目前正在将一个应用程序作为一个项目进行编程。在这样做的过程中，我昨天刚刚接触了 Javascript，但遇到了一个问题，无法停止计数。

我的程序在做什么： 您可以看到一张图像，您必须单击该图像。每点击一次，计数就会+1。这样做时，30 秒的时间正在流逝并显示在屏幕上。

我想达到什么目标： 到目前为止我一切正常。计时器工作正常，当我单击图像时计数正在工作。但我无法开始工作的是，在计时器到达 00:00 后，图像不应再可点击，并且计数应保持在最后达到的数字，因此我可以将其放入高分列表中。

尤其是这部分：

function blobPress() {
            if (timeLeft > 0) {
                count++;
                document.getElementById("count").innerHTML = count;
            } else {
                blob.style.display = "block";
            }
        }

let alarm = new Audio('alarm.mp3');
let finish = new Audio('finish.mp3');
let timerStarted = false;
let count = 0;


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


    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);
      }
    }, 1000);
    timerStarted = true;
  }
}

function showCount() {
  if (timerStarted) {
    document.getElementById('count').style.color = "white";
  } else {
    document.getElementById('count').style.color = "#262626";
  }
}

function hideButton() {
  if (button.style.display === "none") {
    button.style.display = "block";
  } else {
    button.style.display = "none";
  }
}

function blobPress() {
  if (timeLeft > 0) {
    count++;
    document.getElementById("count").innerHTML = count;
  } else {
    blob.style.display = "block";
  }
}

body {background-color: #262626;} 

.background-dark {
  background-color: #262626;
}

.center {
  display: flex;
  justify-content: center;
}

.margin-top {
  margin-top: 60px;
}

.timer {
  font-size: 80px;
  color: white;
  font-family: 'Roboto', sans-serif;
}

.count {
  font-size: 50px;
  color: #262626;
  font-family: 'Roboto', sans-serif;
}

<div>
  <img src="img/menu.png">
</div>


<div class="center margin-top count" id="count">0</div>


<div class="center margin-top">
  <img id="blob" onclick="blobPress()" src="img/blob.png" style="transform: scale(0.9);">
</div>


<div class="center margin-top timer" id="timer">00 : 30</div>


<div class="center margin-top">
  <img id="button" onclick="startTimer(); showCount(); hideButton()" src="img/button.png" style="transform: scale(0.8);">
</div>

Answer 1

问题是：

1. timeLeft

   未在

   blobPress()

   内定义。

2. count

   未正确处理。

我通过执行以下更改解决了问题：

1. 从

   onclick

   中删除了

   #blob

   。
2. 为 blob 创建了一个单击事件侦听器。
3. 已通过

   timeLeft

   至

   blobPress(timeLeft)

   。
4. 创建了一个函数

   parseTimeToSeconds(timeStr)

   以在

   timeLeft

   中返回

   integer

   ，就像当您通过

   innerHTML

   获取它时，它会返回

   string

   。

我还向

alt

添加了

images

属性。其余的`代码