Question

所以我正在研究一个番茄钟计时器，无法弄清楚我的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会破坏这个功能吗？

Answer 1

使用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>

希望这会有所帮助并祝你好运！

Answer 2

这也应该有效，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();

`document.getElementById`会破坏这个功能吗？

2 个答案: