Javascript番茄钟计时器 - 暂停/播放/一般功能

时间:2018-05-27 04:34:14

标签: javascript timer logic

所以我似乎在我的计时器中遇到了一些真正的逻辑错误,而且我不太确定如何修复它们。我已经使代码有点工作了,但我知道有一些逻辑错误,我老实说它已经间歇地工作了几天而且似乎无法解决它。基于我已经列出的代码,你几乎可以理解我对如何解决这个问题的想法。我知道这不是最佳做法,但我只是想在这些问题上解决问题!任何帮助是极大的赞赏。我真的需要最大的帮助来弄清楚如何使用我给定的计时器功能配置暂停和播放功能。 (请不要jQuery示例只有原始JS)

// Necessary Variables for the program
let timer = document.querySelector(".time");
let button = document.querySelector("#btn");
let subtractBreak = document.querySelector("#subtractBreak");
let addBreak = document.querySelector("#addBreak");
let subtractSession = document.querySelector("#subtractSesssion");
let addSession= document.querySelector("#addSession");
// Keeping up with the current count of the break and session
let currentCount = document.getElementsByClassName("counterNum");
// Keeps up with all the buttons on session and break +/-
let counterBtn = document.getElementsByClassName("counterBtn");
// Pause and play Variables
let pause = document.querySelector("#pause");
let play = document.querySelector("#play");
// keeps up with an offsetting count.
let count = 0;
let timerGoing = false;
let sessionTimeLeft = 1500;
let breakTimeLeft = 5;
let timeWhilePaused = sessionTimeLeft;
let paused = false;

function formatTimer(time){
  let minutes = Math.floor(time / 60);
  let seconds = time % 60;
  return `${minutes.toLocaleString(undefined, {minimumIntegerDigits: 2})}:${seconds.toLocaleString(undefined, {minimumIntegerDigits: 2})}`;
}


// This function needs to be fixed - It allows the timer to go negative past 0.
function countdown(){
  timerGoing = true;
    count++;
    timer.innerHTML = formatTimer(sessionTimeLeft - count);
    // Used to remove the listener
    button.removeEventListener("click", interval);
    console.log("Timer is at: " + formatTimer(sessionTimeLeft - count) + "\nCount is at: " + count +  "\nsessionTimeLeft = " + sessionTimeLeft);
    // Checking if the time of the current session is up
    if(count == sessionTimeLeft){
      timerGoing = false;
      alert("We're here stop...");
      startBreak(breakTimeLeft);
    }
}

button.addEventListener("click", interval);
function interval(e){
  setInterval(countdown, 1000);
  console.log("running");
  e.preventDefault();
}
/*
I look through the event listener to be sure to check and see if any of them have been hit
not just the first one, which is what it would check for.
*/
for(let i = 0; i < counterBtn.length; i++){
  counterBtn[i].addEventListener("click", changeCount);
}

/*
  This functions whole job is to see which button was clicked using the 'event target'
  Once found it can determine if the id is subtract - then it will subtract the next element
  founds' amount, due to the structure of the HTML this will always be the number following;
  this process works vice versa for the addition, with the number being the element before.
*/
function changeCount(e){
  let clickedButtonsId = e.target.id;
  if(timerGoing == false){
    if(clickedButtonsId === "subtractBreak"){
      let currentValue = e.target.nextElementSibling.innerText;
      if(currentValue != 1){
      currentValue--;
      e.target.nextElementSibling.innerText = currentValue;
      breakTimeLeft -= 1;
    }
    } else if(clickedButtonsId === "subtractSession"){
        let currentValue = e.target.nextElementSibling.innerText;
          if(currentValue != 1){
        currentValue--;
        e.target.nextElementSibling.innerText = currentValue;
        sessionTimeLeft = currentValue * 60;
        // Allows the timer to update in real time
        timer.innerHTML = formatTimer(sessionTimeLeft);
      }
    }
    else if(clickedButtonsId === "addBreak"){
        let currentValue = e.target.previousElementSibling.innerText;
        currentValue++;
        e.target.previousElementSibling.innerText = currentValue;
        breakTimeLeft += 1;
      }
      else{
        let currentValue = e.target.previousElementSibling.innerText;
        currentValue++;
        e.target.previousElementSibling.innerText = currentValue;
        sessionTimeLeft = currentValue * 60;
        // Allows the timer to update in real time
        timer.innerHTML = formatTimer(sessionTimeLeft);
      }
  }
}

/* These functions below are not working */
pause.addEventListener("click", pauseTimer);
function pauseTimer(){
  timeWhilePaused = sessionTimeLeft;
  button.removeEventListener("click", interval);
  console.log("calling pause"+paused+"\n");
  paused = true;
  console.log("paused after: " + paused);
}

play.addEventListener("click", playTimer);
function playTimer(){
  console.log("Paused = " + paused);
  if(paused == true){
    console.log("calling play");
    console.log("Paused = " + paused);
    sessionTimeLeft = timeWhilePaused;
    setInterval(countdown, 1000);
  }
}

function startBreak(time){
  console.log("Calling this function");
  timer.innerHTML = formatTimer(breakTimeLeft - count);
}

0 个答案:

没有答案