Question

我正在freecodecamp.com上进行一次练习，我们被要求建立一个与this link

类似的番茄钟计时器

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

    <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);
            }

并删除最后的终止测试。

Answer 2

这些方面的东西可以做......

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

<script>

    var toGo = 1000 * 60 * 2 // 2 minutes for the first working period
    var state = 'work';
    var timer

    function start(){
        timer = setInterval(function(){
            if(toGo <= 0){
                if(state == 'work'){
                    state = 'break';
                    toGo = 1000 * 60 * 1; // 1 means one minute for the break
                }
                else if(state == 'break'){
                    state = 'work';
                    toGo = 1000 * 60 * 2; // 2 means two minutes for the working period
                }
            }
            toGo = toGo - 1000
            var now = new Date(toGo)
            document.getElementById('update').innerHTML = now.getMinutes()+':'+now.getSeconds()+' '+state;
         }, 1000);
    }

    function pause(){
        clearInterval(timer)
    }
</script>

在javascript倒计时器中启用中断时间

2 个答案: