“document.getElementById”是否破坏函数

Does `document.getElementById` break the function?

本文关键字：函数 是否 document getElementById      更新时间：2023-09-26

所以我正在使用pomodoro计时器，无法弄清楚我的JS做错了什么。项目概述如下：http://codepen.io/Ohillio/pen/wMoNWy

但我遇到问题的代码的具体部分是：

// global variables
var min = 0;
var sec = 0;

function tick() {
 alert("Counter Started");
 sec = 59;
 min--;
 document.getElementById("timer").innerHTML = min + ":" + sec;
 do {
  sec--
  document.getElementById("timer").innerHTML = min + ":" + sec;
  setTimeout(donothing,500);
} 
  while (sec != 0);
}

问题是，它似乎在第一次通过后就结束了功能。我希望秒数递减到0，但现在它的计算值仅为58。

document.getElementById会破坏功能吗？

使用setInterval可能是更好的解决方案。一旦达到0，它将更准确，也更容易短路。此外，我更喜欢将总时间保持为秒，并且只使用分钟进行显示。我整理了一个例子供你复习。

<script>
  var interval;
  var totalSeconds = 1500;
  function tick() {
    totalSeconds--;
    min = Math.floor(totalSeconds / 60);
    sec = totalSeconds % 60;
    document.getElementById('timer').innerHTML = min + ':' + sec;
    if (0 >= totalSeconds) {
        clearInterval(interval);
    }
  }
  interval = setInterval(tick, 1000);
</script>

希望这能有所帮助，祝你好运！

这也应该起作用，有1位数的秒格式修复：

var min = 1;
var sec = 30;
function tick() {
    document.getElementById("timer").innerHTML = min + ":" + (sec.toString().length < 2 ? '0' : '') + sec;
    if(sec === 0 && min > 0) {
        min--;
        sec = 59;
        setTimeout(tick, 500);
    } else if (sec > 0) {
        sec--;
        setTimeout(tick, 500);
    } else {
        alert("Done!");
    }
}
alert("Counter Started");
tick();
相关文章：