javascript - 在 JavaScript 倒计时器中启用休息时间

Question

我正在 freecodecamp.com 上进行一项练习，我们被要求构建一个类似于 this link 中的番茄计时器。

我通过尝试格式化两个日期对象并找到差异来接近它，然后尝试将其格式化为分钟:秒格式，即2:05格式(可能有很多更好的方法)。我已经能够写到可以启动计时器、暂停计时器以及从暂停点继续计时器的程度。但是，如果我将结束时间设置为 new Date("July 21, 1983 00:01:05") 我注意到计时器从 1:00 跳到 0:58。此外，练习还指出应该有休息时间，即休息时间应在训练时间结束后开始，当休息时间结束时，训练时间应重新开始。这是我无法复制的。我尝试创建另一组日期对象，其中包含我想要比较的休息时间，然后倒计时，但当它结束时，它会再次开始休息时间，而不是跳转到 session 时间。我真的不想从已完成的练习中复制代码，我想自己解决这个问题(如果需要的话可以提供一些帮助)。

    <div id="update"></div>
 <button class="start" onclick="count()">start</button>
    <button class="pause" onclick=" pause() ">Pause</button>
    <button class="play" onclick=" play() ">Continue</button>

<script>
    var start = new Date("July 21, 1983 0:00:00");
    var end = new Date("July 21, 1983 00:01:05");
    var difference = (end - start) / 1000;
    var min = Math.floor(difference / 60);
    var sec = difference % 60;
    updateTarget(min, sec);
    var paused = false;

function count() {
        if (paused === false) {
            if (min > 0 || sec > 0) {
                if (sec === 0) {
                    min--;
                    sec = 60;
                    sec--;
                    updateTarget(min, sec);
                }
                sec--;
                updateTarget(min, sec);
                var timer = setTimeout(function() {
                    count();
                }, 1000);
                if (min === 0 && sec === 0) {
                    clearTimeout(timer);
                }
            }
        }
    }

    function pause() {
        paused = true;
    }
    function play() {
        paused = false;
        setTimeout(function () {
            count();
        }, 1000);
    }
    function updateTarget(min,sec) {
        var target = document.getElementById("update");
        if (sec < 10) {
            sec = "0" + sec;
        }
        target.innerHTML = min + ": " + sec;
    }
</script>

Answer 1

您从 60 变为 58 的原因是因为您在翻转后递减了两次 (0->60)。删除 if 内的减量，这应该可以解决这个问题:

            if (sec === 0) {
                min--;
                sec = 60;
                updateTarget(min, sec);
            }

此外，您最后的终止测试是错误的，因为当秒 === 0 时，您在检查分钟之前将其重置为 60。对此的检查应该在之前的测试中进行。尝试这样的事情:

            if (sec === 0) {
                if (min === 0) {
                    clearTimeout(timer);
                    return;
                }
                min--;
                sec = 60;
                updateTarget(min, sec);
            }

并删除最后的终止测试。