倒计时器值重置为默认值

Question

我的“秒”值从59开始（默认值）

但是当点击暂停按钮时（即倒计时开始后）......

再次点击播放按钮，它从59开始！点击暂停时的秒数的cuurent值...请帮助

签出代码，看看我做错了什么......

var y = parseInt(document.getElementById("myP1").innerHTML);
var z = parseInt(document.getElementById("h1").innerHTML);

var f;

function addTo1() {
  y = y + 5;
  document.getElementById("myP1").innerHTML = y + "m";
  document.getElementById("h1").innerHTML = y + ":" + 0 + 0;
}

function subFrom1() {
  if (y > 5) {
    y = y - 5;
    document.getElementById("myP1").innerHTML = y + "m";
    document.getElementById("h1").innerHTML = y + ":" + 0 + 0;
  }
}

document.getElementById("btn").addEventListener("click", function() {
  var min = z - 1;
  var sec = z - z + 59;

  f = setInterval(function() {
    document.getElementById("h1").innerHTML = min + ":" + sec;
    if (min === 0 && sec === 0) {
      document.getElementById("h1").innerHTML = "0:00";
      document.getElementById("mp3").play();
      clearInterval(f);
    } else if (sec === 0) {
      min--;
      sec = 59;
    }
    sec--;
  }, 50);

});

document.getElementById("btn4").addEventListener("click", function() {
  clearInterval(f);
  document.getElementById("myP1").innerHTML = 25 + "m";
  document.getElementById("h1").innerHTML = "25:00";
});

document.getElementById("btn1").addEventListener("click", function() {
  var b = document.getElementById("h1").innerHTML;
  var c = parseInt(b[3] + b[4]);
  clearInterval(f);
  z = min;
  c = sec;
  if (z === 0) {
    clearInterval(f);

  }

});

<div class="container">
  <h1>Pomodoro Clock</h1>
  <div class="button">

    <div class="sess">
      <p>Sesion Length</p>
      <div class="btn">
        <button onclick="subFrom1()">
                -
                </button>
        <p class="p1" id="myP1">25m</p>
        <button class="add" onclick="addTo1()">
                +
                </button>
      </div>
    </div>

  </div>
  <h2 id="h1">25:00</h2>
  <button id="btn">
        play</button>
  <button id="btn1">
        pause
          </button>
  <button id="btn4">
            reset</button>
</div>

Answer 1

在单击播放按钮时执行的功能中，它会重置前两行中的min和sec。您需要检查这些值是否小于开始时间，然后根据需要更改值。将它们存储为全局对象的属性也可能有帮助。

Answer 2

var y = parseInt(document.getElementById("myP1").innerHTML);
var z = parseInt(document.getElementById("h1").innerHTML);

var f;

function addTo1() {
  y = y + 5;
  document.getElementById("myP1").innerHTML = y + "m";
  document.getElementById("h1").innerHTML = y + ":" + 0 + 0;
}

function subFrom1() {
  if (y > 5) {
    y = y - 5;
    document.getElementById("myP1").innerHTML = y + "m";
    document.getElementById("h1").innerHTML = y + ":" + 0 + 0;
  }
}

document.getElementById("btn").addEventListener("click", function() {
  z = parseInt(document.getElementById("h1").innerHTML);
  var min = z - 1;
  var sec = z - z + 59;
  if(f) clearInterval(f);
  f = setInterval(function() {
    document.getElementById("h1").innerHTML = min + ":" + sec;
    if (min === 0 && sec === 0) {
      document.getElementById("h1").innerHTML = "0:00";
      document.getElementById("mp3").play();
      clearInterval(f);
    } else if (sec === 0) {
      min--;
      sec = 59;
    }
    sec--;
  }, 50);

});

document.getElementById("btn4").addEventListener("click", function() {
  clearInterval(f);
  document.getElementById("myP1").innerHTML = 25 + "m";
  document.getElementById("h1").innerHTML = "25:00";
});

document.getElementById("btn1").addEventListener("click", function() {
  var b = document.getElementById("h1").innerHTML;
  var c = parseInt(b[3] + b[4]);
  clearInterval(f);
  z = min;
  c = sec;
  if (z === 0) {
    clearInterval(f);

  }

});

<div class="container">
  <h1>Pomodoro Clock</h1>
  <div class="button">

    <div class="sess">
      <p>Sesion Length</p>
      <div class="btn">
        <button onclick="subFrom1()">
                -
                </button>
        <p class="p1" id="myP1">25m</p>
        <button class="add" onclick="addTo1()">
                +
                </button>
      </div>
    </div>

  </div>
  <h2 id="h1">25:00</h2>
  <button id="btn">
        play</button>
  <button id="btn1">
        pause
          </button>
  <button id="btn4">
            reset</button>
</div>

值z不是实时的，所以你需要重新加载它......