Javascript Pomotoro计时器-暂停/播放/常规功能

Javascript Pomotoro计时器-暂停/播放/常规功能,javascript,timer,logic,Javascript,Timer,Logic,所以我的计时器中似乎有一些真正的逻辑错误,我不太确定如何修复它们。我已经使代码工作了一些,但我知道实际上有一些逻辑错误,老实说,我已经断断续续地工作了几天,似乎无法解决它。根据我列出的代码,您可以非常理解我对如何解决此问题的想法。我知道这不是最佳实践,但我只是在努力解决这些问题!非常感谢您的帮助。我真的需要得到最多的帮助来弄清楚如何使用给定的计时器功能配置暂停和播放功能。(请不要使用jQuery示例,仅使用原始JS) //程序所需的变量 让定时器=document.querySelector(“

所以我的计时器中似乎有一些真正的逻辑错误,我不太确定如何修复它们。我已经使代码工作了一些,但我知道实际上有一些逻辑错误,老实说,我已经断断续续地工作了几天,似乎无法解决它。根据我列出的代码,您可以非常理解我对如何解决此问题的想法。我知道这不是最佳实践,但我只是在努力解决这些问题!非常感谢您的帮助。我真的需要得到最多的帮助来弄清楚如何使用给定的计时器功能配置暂停和播放功能。(请不要使用jQuery示例,仅使用原始JS)

//程序所需的变量
让定时器=document.querySelector(“.time”);
let button=document.querySelector(“#btn”);
设subtractBreak=document.querySelector(“#subtractBreak”);
设addBreak=document.querySelector(#addBreak”);
让subtractSession=document.querySelector(“#subtractSession”);
让addSession=document.querySelector(#addSession”);
//保持中断和会话的当前计数
让currentCount=document.getElementsByCassName(“counterNum”);
//了解会话和中断的所有按钮+/-
让counterBtn=document.getElementsByClassName(“counterBtn”);
//暂停和播放变量
让pause=document.querySelector(#pause”);
让播放=document.querySelector(“播放”);
//保持抵消计数。
让计数=0;
设timerGoing=false;
设sessionTimeLeft=1500;
设breakTimeLeft=5;
让timeWhilePaused=sessionTimeLeft;
让暂停=假;
函数格式化计时器(时间){
分钟=数学楼层(时间/60);
让秒=时间%60;
返回${minutes.tolocalString(未定义,{minimumIntegerDigits:2})}:${seconds.tolocalString(未定义,{minimumIntegerDigits:2})};
}
//此功能需要修复-它允许计时器在0之后变为负数。
函数倒计时(){
timerGoing=true;
计数++;
timer.innerHTML=formatTimer(sessionTimeLeft-count);
//用于删除侦听器
按钮。removeEventListener(“单击”,间隔);
log(“计时器位于:”+formatTimer(sessionTimeLeft-count)+“\n计数器位于:”+count+”\nsessionTimeLeft=“+sessionTimeLeft”);
//正在检查当前会话的时间是否已到
if(count==sessionTimeLeft){
timerGoing=false;
警惕(“我们到了,停下……”);
startBreak(breakTimeLeft);
}
}
按钮。addEventListener(“单击”,间隔);
功能间隔(e){
设置间隔(倒计时,1000);
控制台日志(“运行”);
e、 预防默认值();
}
/*
我查看事件侦听器,确保检查并查看是否有任何事件被击中
不仅仅是第一个,这是它要检查的。
*/
for(设i=0;i
将您的问题从浏览器中分离出来,并为您的业务逻辑编写测试。您能详细说明一下您的意思吗?
// 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);
}