番茄钟给出负值

创建一个番茄时间时钟使用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中找到它。

来源

2016-06-15 Human Cyborg Relations

由于在完成work timer之后，您的clearInterval实际上并没有清除您的计时器，所以您会得到负值。现在，以前的计时器已经被设置和break timer也被初始化由于这两个同时运行和设定值。当休息定时器设置成负值未来finaltime已经达到。

一件事转换到milliseconds秒getTimeInSeconds()。假设，现在时间是15:59:40，你开始为1 minute计时器，然后会发生什么是不同的东西。对于第一20秒它将运行不错，但之后你分钟重置为0，这将设置你分钟60你是为1 minute设置计时器但60 minutes结束。在平等的检查条件

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

还有一件事你正在使用finalTime = sessionVal * 60 + currentTime它的工作原理设置finalTime但你设置的警告对话框。假设，有人单击确定后5 seconds现在你的计时器不会为60 seconds运行，因为各5秒钟被已经经过了55 seconds，而不是运行。点击提醒后，不知道您希望自己的时间如何处理，无论是点击后开始播放，还是继续播放。只是说。

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

来源

2016-06-15 10:20:25

番茄钟给出负值

回答

相关问题