番茄鍾給出負值

創建一個番茄時間時鐘使用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

番茄鍾給出負值

回答

相關問題