番茄钟中断按钮不起作用答案

【问题标题】：Pomodoro Clock Break Buttons not working番茄钟中断按钮不起作用
【发布时间】：2015-12-19 03:21:36
【问题描述】：

我正在构建一个番茄钟来改进我的 JavaScript，但我遇到了一些问题。对于初学者来说，休息时间的递增/递减按钮不会更新显示中的时间。其次，会话时间在第一个休息期后不会重新开始。谁能告诉我我哪里出错了？

HTML：

<html>
<head>
  <title>David Hall - Pomodoro Clock Zipline</title>
  <link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div class="container">
    <h1 class="center">Pomodoro Clock</h1>
    <div class="row">
      <div class="center">
      <div class="col-sm-6">Break Length</div>
      <div class="col-sm-6">Work Length</div>
      <div class="col-sm-6" id="center">
        <div class="btn-group">
          <button type="button" class="btn btn-success" id="decreaseBreak"><span class="glyphicon glyphicon-menu-left"></span>
            <button type="button" class="btn btn-success"><span id="breakTime">5</span>
              <button type="button" class="btn btn-success btn" id="increaseBreak"><span class="glyphicon glyphicon-menu-right"></span></div>
      </div>
      <div class="col-sm-6">
        <div class="btn-group">
          <button type="button" class="btn btn-success" id="decreaseWork"><span class="glyphicon glyphicon-menu-left"></span>
                <button type="button" class="btn btn-success"><span id="workTime">25:00</span>
              <button type="button" class="btn btn-success btn" id="increaseWork">     <span class="glyphicon glyphicon-menu-right"></span></div>
    </div>
    <br />
    <br />
    <br />
    <br />
    <div class="center">
      <div class="boxed">
        <br />
        <span id="boxText">SESSION</span>
        <br />
        <br />
        <br />
        <span id="display"></span>
        <br />
        <span id="timerStatus"></span>
      </div>
      <br />
      <button type="button" class="btn btn-success btn-sm" id="start">Start</button>
      <button type="button" class="btn btn-success btn-sm" id="pause">Pause</button>
      <button type="button" class="btn btn-success btn-sm" id="reset">Reset</button>
    </div>
  </div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>    </script>
  <script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
  <script src="script.js"></script>
</body>

</html>

还有 JavaScript：

var myInterval;
var workTime = document.getElementById("workTime").innerHTML = 25;
var breakTime = document.getElementById("breakTime").innerHTML = 5;
var remainSec = workTime * 60;

document.getElementById("display").innerHTML = workTime;

function startWork() {
  document.getElementById("start").disabled = true;
  timer(callback);
}

function pauseTime() {
  clearInterval(myInterval);
  document.getElementById("start").disabled = false;
}

function displayTime(remainingTime) {
  if (remainingTime % 60 >= 10) {
    document.getElementById('display').innerHTML = Math.floor(remainingTime / 60) + ':' + Math.floor(remainingTime % 60);
  } else {
    document.getElementById('display').innerHTML = Math.floor(remainingTime / 60) + ':' + "0" + Math.floor(remainingTime % 60);
  }
}

function timer(pomodoro) {
  var remainingTime = remainSec;
  myInterval = setTimeout(function() {
    displayTime(remainingTime);
    if (remainingTime >= 0) {
      remainSec--;
      timer(pomodoro);
    } else {
      clearInterval();
      pomodoro();
    }
  }, 1000);
}

var callback = function() {
  console.log('callback');
  document.getElementById('timerStatus').innerHTML = "Take a break!";
  remainSec = breakTime * 60;
  timer(callbackRest)
};

var callbackRest = function() {
  clearInterval(myInterval);
  console.log('callbackRest');
  document.getElementById('timerStatus').innerHTML = "Begin";
  remainSec = workTime * 60;
  document.getElementById("start").disabled = false;
};

function resetTime() {
  clearInterval(myInterval);
  remainSec = workTime * 60;
  startWork();
}

function decreaseWork() {
  if (workTime >= 1) {
    document.getElementById('workTime').innerHTML = --workTime;
    remainSec = workTime * 60;
  }
}

function decreaseBreak() {
  if (breakTime >= 1) {
    document.getElementById('breakTime').innerHTML = --breakTime;
  }
}

function increaseWork() {
  document.getElementById('workTime').innerHTML = ++workTime;
  remainSec = workTime * 60;
}

function increaseBreak() {
  document.getElementById('breakTime').innerHTML = ++breakTime;
}
document.getElementById('start').addEventListener('click', startWork);
document.getElementById('pause').addEventListener('click', pauseTime);
document.getElementById('reset').addEventListener('click', resetTime);
document.getElementById('decreaseWork').addEventListener('click', decreaseWork);
document.getElementById('decreaseBreak').addEventListener('click',  decreaseBreak);
document.getElementById('increaseWork').addEventListener('click', increaseWork);
document.getElementById('increaseBreak').addEventListener('click', increaseBreak);

非常感谢任何反馈！

【问题讨论】：

标签： javascript

【解决方案1】：

我只是添加了一些东西。

添加了前两个标志来了解isPomodoroTime 状态和isBreakTime 状态，也许你会问为什么要两个？因为我需要一个初始状态，当两者都为假时，我可以使用这些标志递增并显示时间而不会混淆，因为有一个名为 changeTimeAndDisplay 的新函数正在从所有 increase 和 decrease 方法中调用.我还在回调中放了一个startWork，假设在休息时间结束时会调用它。

here is a demo - codepen.io

var myInterval;
var workTime = document.getElementById("workTime").innerHTML = 25;
var breakTime = document.getElementById("breakTime").innerHTML = 5;
var remainSec = workTime * 60;
var isPomodoroTime = false; //new
var isBreakTime = false; //new

//new function
function changeTimeAndDisplay(newTime){
  remainSec = newTime * 60;
  displayTime(remainSec);
}

document.getElementById("display").innerHTML = workTime;

function startWork() {
  isPomodoroTime = true; //new
  document.getElementById("start").disabled = true;
  timer(callback);
}

function pauseTime() {
  clearInterval(myInterval);
  document.getElementById("start").disabled = false;
}

function displayTime(remainingTime) {
  if (remainingTime % 60 >= 10) {
    document.getElementById('display').innerHTML = Math.floor(remainingTime / 60) + ':' + Math.floor(remainingTime % 60);
  } else {
    document.getElementById('display').innerHTML = Math.floor(remainingTime / 60) + ':' + "0" + Math.floor(remainingTime % 60);
  }
}

function timer(pomodoro) {
  var remainingTime = remainSec;
  myInterval = setTimeout(function() {
    displayTime(remainingTime);
    if (remainingTime >= 0) {
      remainSec--;
      timer(pomodoro);
    } else {
      clearInterval(myInterval); //new
      pomodoro();
    }
  }, 1000);
}

var callback = function() {
  isPomodoroTime = false; //new
  isBreakTime = true; //new
  console.log('callback');
  document.getElementById('timerStatus').innerHTML = "Take a break!";
  remainSec = breakTime * 60;
  timer(callbackRest)
};

var callbackRest = function() {
   isPomodoroTime = true; //new
  isBreakTime = false; //new 
  clearInterval(myInterval);
  console.log('callbackRest');
  document.getElementById('timerStatus').innerHTML = "Begin";
  remainSec = workTime * 60;
  document.getElementById("start").disabled = false;
  startWork(); //new
};

function resetTime() {
  clearInterval(myInterval);
  remainSec = workTime * 60;
  startWork();
}

function decreaseWork() {
  if (workTime >= 1) {
    document.getElementById('workTime').innerHTML = --workTime;
    if(isPomodoroTime || !isPomodoroTime && !isBreakTime){ //new if block
      changeTimeAndDisplay(workTime);
    }
  }
}

function decreaseBreak() {
  if (breakTime >= 1) {
    document.getElementById('breakTime').innerHTML = --breakTime;
    if(!isPomodoroTime && isBreakTime){ //new if block
      changeTimeAndDisplay(breakTime);
    }
  }
}

function increaseWork() {
  document.getElementById('workTime').innerHTML = ++workTime;
    if(isPomodoroTime || !isPomodoroTime && !isBreakTime){ //new if block
      changeTimeAndDisplay(workTime);
    }
}

function increaseBreak() {
  document.getElementById('breakTime').innerHTML = ++breakTime;
  if(!isPomodoroTime && isBreakTime){ //new if block
      changeTimeAndDisplay(breakTime);
    }
}
document.getElementById('start').addEventListener('click', startWork);
document.getElementById('pause').addEventListener('click', pauseTime);
document.getElementById('reset').addEventListener('click', resetTime);
document.getElementById('decreaseWork').addEventListener('click', decreaseWork);
document.getElementById('decreaseBreak').addEventListener('click',  decreaseBreak);
document.getElementById('increaseWork').addEventListener('click', increaseWork);
document.getElementById('increaseBreak').addEventListener('click', increaseBreak);

作为建议，您可以进一步简化代码，例如为 document.getElementById(id).addEventListener(evnName,func); 创建一个函数

function addAction(evnName,id,selector){
   document.getElementById(id).addEventListener(evnName,func);
}

或

function addValue(id,value){
    document.getElementById(id).innerHTML = value;
}

并替换所有document.getElementById

问候。

【讨论】：

谢谢salc2。这是有道理的，但是在第一个休息时间之后计时器仍然没有重新启动。
我刚刚在演示上试过它似乎工作。评估：将工作时间设置为 0，将休息时间设置为 1 分钟。按下按钮开始工作，现在将工作时间更改为 1 分钟，然后等到休息时间结束，您将看到工作时间自动重新启动。 @haldav
我的错。我粗手指了修订版。谢谢！
没问题，很好的锻炼@haldav