Question

我正在尝试构建一个简单的Podomoro时钟，我遇到了增量和减量控制的问题。我希望用户在暂停（停止）计时器时仅控制增量/减量显示，而是发生了什么即使定时器正在运行或停止，也可以控制定时器显示。

这是我的代码：

HTML

<div class="container text-center">
<div class="row text-center">
    <div class="col-xs-12">
      <h1>FreeCodeCamp Podomoro</h1>
    </div>
  </div>
  <div class="row intervalContainer text-center">
    <div class="col-xs-12" id="break">
      <h3>Break Time</h3> <br />
      <button class="btn btn-danger" id="breakMinus">-</button>
      <div id="breakNum">5</div>
      <button class="btn btn-success" id="breakPlus">+</button>
    </div>
    <div class="col-xs-12" id="Setpomodoro">
      <h3>Pomodoro Time</h3> <br />
      <button class="btn btn-danger" id="workMinus">-</button>
      <div id="pomodoroNum">25</div>
      <button class="btn btn-success" id="workPlus">+</button>
    </div>
  </div>
  <div class="row timerContainer text-center">
    <div class="col-xs-12">
      <h2 id="timerStatus">Work</h2>
      <span id="timer">26</span>
    </div>
  </div>
  <div class="row start_stop">
    <div class="col-xs-12 text-center" id="buttonContainer">
      <button class="btn btn-success" id="startBtn">Start</button>
      <button class="btn btn-danger" id="stopBtn">Stop</button>
    </div>
  </div>

</div>

JS

 $(document).ready(function() {
  var pomoTime = $('#pomodoroNum');
  var breakTime = $('#breakNum');
  var status = $('#timerStatus');
  var timerDisplay = $('#timer');
  var startButton = $('#startBtn');
  var stopButton = $('#stopBtn');
  var state = 1; // 1=stopped 2=running
  var pomoVal = 24;
  var breakVal = 4;
  var countDown;

  startButton.click(function() {
    if (state == 1) { // if timer is not running then start timer
      state = 2;
      startTimer(pomoVal);

    };
  });

  stopButton.on("click", function() {
    if (state == 2) {
      pauseTimer();
      state = 1;
    }
  });

  updateDisplay();

  function startTimer(time) {

    var minutes = time;
    var seconds = 60;

    countDown = setInterval(function() {

      seconds--;
      minutes = ("0" + minutes).slice(-2); // double digits conversion if <10
      seconds = ("0" + seconds).slice(-2);

      timerDisplay.html(minutes + ":" + seconds);

      if (seconds == 0) {
        minutes-- // decerement minutes when seconds 0...
        seconds = 60; // ..and reset seconds to 60
      }

      if (minutes < 0) {
        clearInterval(countdown);
      }

    }, 1000);

  };

  function pauseTimer() {

    clearInterval(countDown);
  };


  function updateDisplay() {
    if (status == 2) {
      return false;
    }
    $('#breakMinus').on("click", function() {
      status.html("Break");
      if (breakTime.html() > 1) {
        breakTime.html(parseInt(breakTime.html()) - 1);
      };
      timerDisplay.html(breakTime.html());
    });

    $('#breakPlus').on("click", function() {
      status.html("Break");
      breakTime.html(parseInt(breakTime.html()) + 1); // parseInt to covert string into number so it doesn't concatanate.
      timerDisplay.html(breakTime.html());
    });

    // work minus and plus
    $('#workMinus').on("click", function() {
      status.html("Work");
      if (pomoTime.html() > 1) {
        pomoTime.html(parseInt(pomoTime.html()) - 1);
      };
      timerDisplay.html(pomoTime.html());
    });

    $('#workPlus').on("click", function() {

      status.html("Work");
      pomoTime.html(parseInt(pomoTime.html()) + 1); // parseInt to covert string into number to prevent concatanation.
      timerDisplay.html(pomoTime.html());

    });
  };



});

我试图返回函数updateDisplay（）以在状态为2（当计时器运行时）停止它。但它仍然不起作用。

示例：http://codepen.io/aliz16/pen/OXMwRJ?editors=1010

Answer 1

您需要检查控件事件处理程序中的状态变量：

  function updateDisplay() {
    /*
      Not Needed
      if (status == 2) {
         return false;
      }
    */
    $('#breakMinus').on("click", function() {
      // Check status here
      if (status == 2) {
         return false;
      }
      status.html("Break");
      if (breakTime.html() > 1) {
        breakTime.html(parseInt(breakTime.html()) - 1);
      };
      timerDisplay.html(breakTime.html());
    });

    $('#breakPlus').on("click", function() {
      // Check status here
      if (status == 2) {
         return false;
      }
      status.html("Break");
      breakTime.html(parseInt(breakTime.html()) + 1); // parseInt to covert string into number so it doesn't concatanate.
      timerDisplay.html(breakTime.html());
    });

    // work minus and plus
    $('#workMinus').on("click", function() {
      // Check status here
      if (status == 2) {
         return false;
      }
      status.html("Work");
      if (pomoTime.html() > 1) {
        pomoTime.html(parseInt(pomoTime.html()) - 1);
      };
      timerDisplay.html(pomoTime.html());
    });

    $('#workPlus').on("click", function() {

       // Check status here
      if (status == 2) {
         return false;
      }
      status.html("Work");
     pomoTime.html(parseInt(pomoTime.html()) + 1); // parseInt to covert string into number to prevent concatanation.
      timerDisplay.html(pomoTime.html());

    });
  };

Javascript / Jquery番茄钟：时钟运行时显示问题

1 个答案: