Question

使用JavaScript创建番茄钟。它工作正常，但一旦它到达休息计时器，并且在那之后的一切，它给我一个在秒之间的负时间。

JavaScript的：

    $(document).ready(function(){
    var clock = $("#clock");
    var heading = $("h1");
    var breakMinus = $("#break-minus");
    var breakPlus = $("#break-plus");
    var sessionMinus = $("#session-minus");
    var sessionPlus = $("#session-plus");
    var breakTime = $("#break-time");
    var sessionTime = $("#session-time");
    var startButton = $("#start-btn");
    var resetButton = $("#reset-btn");
    var breakVal = parseInt(breakTime.val());
    var sessionVal = parseInt(sessionTime.val());

    breakMinus.on("click", function(){
        if (breakVal > 0) {
            breakVal--;
            breakTime.val(breakVal);
        }
    });

    breakPlus.on("click", function(){
        breakVal++;
        breakTime.val(breakVal);
    });

    sessionMinus.on("click", function(){
        if (sessionVal > 0) {
            sessionVal--;
            sessionTime.val(sessionVal);
        }
    });

    sessionPlus.on("click", function(){
        sessionVal++;
        sessionTime.val(sessionVal);
    });

    startButton.on("click", function(){
        if (valuesEntered()) {
            var finalTime = sessionVal * 60 + getTimeInSeconds();
            heading.html("Session running!");
            setInterval(function(){startTime(getTimeInSeconds(), finalTime)}, 1000);
        }
    });

    breakTime.on("input", function(){
        breakVal = parseInt(breakTime.val());
    });

    sessionTime.on("input", function(){
        sessionVal = parseInt(sessionTime.val());
    });

    function valuesEntered(){
        console.log("breakVal = " + breakVal);
        console.log("sessionVal = " + sessionVal);
        if (breakVal < 0 || sessionVal < 0) {
            alert("Time can't be negative! Check your inputs!");
        } else if (breakVal === 0 || sessionVal === 0){
            alert("Please enter a time for your break and session! (Time can't be 0)");
        } else {
            return true;
        }
    }

    function startTime(currentTime, finalTime){
        console.log("Setting timer...");
        setTime(currentTime, finalTime);
        if(finalTime === getTimeInSeconds()){
            alert("Time for a break!");
            heading.html("Break!");
            finalTime = breakVal * 60 + currentTime;
            clearTimer();
            setInterval(function(){startBreak(getTimeInSeconds(), finalTime)}, 1000);
        }
    }

    function clearTimer() {
        var intervalID = window.setInterval("", 9999); // get reference to last interval + 1
        clearInterval(intervalID - 1);
    }

    function startBreak(currentTime, finalTime){
        console.log("Break time...");
        setTime(currentTime, finalTime);
        if(finalTime === getTimeInSeconds()){
            alert("Back to work!");
            heading.html("Session running!");
            finalTime = sessionVal * 60 + currentTime;
            clearTimer();
            setInterval(function(){startTime(getTimeInSeconds(), finalTime)}, 1000);
        }

    }

    function setTime(currentTime, finalTime){
        console.log("Setting the time. Current Time = " + getTimeInSeconds() + ",  FinalTime = " + finalTime);
        var minutes = Math.floor((finalTime - currentTime) / 60);
        var seconds = (finalTime - currentTime) % 60;
        if (minutes < 10) {
            minutes = "0" + minutes;
        }
        if (seconds < 10) {
            seconds = "0" + seconds;
        }
        clock.html(minutes  + ":" + seconds);
    }

    function getTimeInSeconds() {
        var date = new Date();
        return date.getMinutes() * 60 + date.getSeconds();
    }
});

我不会发布HTML和CSS代码，因为我认为它不相关。你可以在jsfiddle中找到它。

Answer 1

您收到的是负值，因为在work timer完成后，您的clearInterval实际上并未清除您的计时器。现在，您的上一个计时器已经设置，并且break timer也被初始化，因为它们同时运行并且设置值。设置中断计时器时已达到finaltime，因此负值即将到来。

在milliseconds中将getTimeInSeconds()转换为秒数还有一件事。假设，当前时间为15:59:40并且您正在为1 minute启动计时器，那么将会发生什么不同的事情。在第一个20秒后，它会运行良好但在此之后您的分钟会重置为0，这会将您的分钟设置为60您为1 minute设置的时间，但最终会60 minutes。

平等检查条件还有一件事

if(finalTime === getTimeInSeconds()){
}

您正在使用finalTime设置finalTime = sessionVal * 60 + currentTime，但是您正在设置警告对话框。假设有人在5 seconds之后点击确定，现在您的计时器不会为60 seconds运行而是为55 seconds运行，因为已经过了5秒。在点击提醒之后，不知道您希望如何处理时间，无论是在点击后开始时间还是继续前进。只是说。

这是您更新的jsfiddle https://jsfiddle.net/3fehu668/3/

番茄钟提供负值

1 个答案: