Question

我正在构建番茄钟以改进我的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);

非常感谢任何反馈！

Answer 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

问候。

番茄钟时钟休息按钮不工作

1 个答案: