javascript秒表用户输入

Question

有人知道为什么自从我点击恢复按钮后我的计数器就从头开始计数吗？

var minute;
var second;
var audio;
var interval;
var button = HTMLButtonElement.value = "Resume"

function yok() {
  document.getElementById("btninput").disabled = true
  minute = document.getElementById("minute").value
  second = document.getElementById("second").value

  interval = setInterval(tambah, 1000)

  function tambah() {
    second--
    if (minute != 0 && second == -1) {
      minute--
      second = 59
    } else if (minute == 0 && second == 0) {
      clearInterval(interval)
      document.getElementById("hasill").innerHTML = "Finish!!!"
      document.getElementById("btninput").disabled = false
    }
    document.getElementById("hasil").innerHTML = minute + " : " + second
  }
}



function stop() {
  document.getElementById("btninput").disabled = false
  clearInterval(interval)

  document.getElementById("btninput").innerHTML = button;
}

<p data-component="head">TIMER</p>
<input type="number" id="minute" placeholder="minute" style="width: 65px;" data-component="minute">
<input type="number" id="second" placeholder="seconds" style="width: 69px;" max="60" data-component="second">
<p id="hasil" data-component="hasil">00</p>
<p id="hasill" data-component="hasill"></p>
<audio src="ding-sound-effect_2.mp3" id="sound" data-component="sound"></audio>
<button onclick="yok()" data-component="button" id="btninput">start</button>
<button onclick="stop()" id="stop">stop</button>

Answer 1

当您按下resume 时，yok() 被调用。重置分钟和秒于

minute = document.getElementById("minute").value
second = document.getElementById("second").value

您可以添加一个条件来处理简历的情况。

  if (document.getElementById("btninput").innerHTML !== button){
    minute = document.getElementById("minute").value;
    second = document.getElementById("second").value;
  }

<小时/>

编辑: 因此，为了更清楚地解释，您应该记住，恢复按钮仍然将 onclick 事件设置为 yok() (因为您仅将 insideHTML 从 start 更改为 继续)。 那么如果你按恢复键会发生什么呢？好吧，yok() 函数将被执行，并运行该行

minute = document.getElementById("minute").value
second = document.getElementById("second").value

它将分钟和秒的值设置为输入字段中的任何值(基本上重置计时器)。

所以必须做的是检查按钮是否设置为开始按钮状态或恢复按钮状态。因此，就像我上面所做的那样，最简单的方法(尽管不是最干净的)您可以检查按钮上的innerHTML是否显示“恢复”。

<小时/>

此外，正如 ImranRafiqRather 提到的，设置默认值分钟和秒可能是一个更好的主意。

我建议做类似的事情

  minute = document.getElementById("minute").value || 0;
  second = document.getElementById("second").value || 0;

这确保如果元素的值是假的，代码仍然会将变量设置为 0(您可能想阅读有关假值和 || (或)语法的信息，它可能看起来很奇怪，但是，JavaScript 是一种很奇怪的语言 :P)。