Question

我是JavaScript的初学者和stackoverflow的新手，正在开发一个项目Pomodoro Timer来构建这样的东西 http://codepen.io/GeoffStorbeck/full/RPbGxZ/

但我坚持其关于如何进行会话倒计时的功能并在再次开始计数之前等待breaklength倒计时，这就是我走了多远http://codepen.io/Lumexralph/pen/qbqJKq/

var breakLength = 5,
  session = 20; //starts the time on break
var show = document.getElementById('displayBreak'); //get the elements to show the time
show.textContent = breakLength; //puts the var as the textcontent

var showSession = document.getElementById('displaySession'); //get the elements to show the time
showSession.textContent = session; //puts the var as the textcontent

var sessionCountdown = document.getElementById('sessionCount'); // for counting session
sessionCountdown.textContent = session;

function subtraction() {
  //to increase the starting variable
  breakLength -= 1;
  var displayLength = document.getElementById('displayBreak');
  displayLength.textContent = breakLength;
}

function addition() {
    //to increase the starting variable
    breakLength += 1;
    var displayLength = document.getElementById('displayBreak');
    displayLength.textContent = breakLength;
  }
  /*functions to add and reduce the session time*/

function sessionSubtraction() { // to reduce sessiontime
  session -= 1;
  //for session div
  var holdSession = document.getElementById('displaySession');
  holdSession.textContent = session;
  //for session countdown
  var holdSessionCount = document.getElementById('sessionCount');
  holdSessionCount.textContent = session;
}

function sessionAddition() { // to reduce sessiontime
    session += 1;
    //for session div
    var holdSession = document.getElementById('displaySession');
    holdSession.textContent = session;
    //for session count
    var holdSessionCount = document.getElementById('sessionCount');
    holdSessionCount.textContent = session;
  }
  //function to start the countdown

function countdown() {
  var sessionData = document.getElementById('sessionCount').textContent;
  sessionData--;
  setTimeout('countdown()', 1000);
}

//add event listener click
var timeCount = document.getElementById('sessionCount');
timeCount.addEventListener('click', countdown, false);
//adding event hlisteners for lengthbreak
var showBreak = document.getElementById('plusButton');
showBreak.addEventListener('click', addition, false);

var showBreak = document.getElementById('minusButton');
showBreak.addEventListener('click', subtraction, false);

//event for session
var sessionLength = document.getElementById('minusSession');
sessionLength.addEventListener('click', sessionSubtraction, false);

var sessionLength = document.getElementById('plusSession');
sessionLength.addEventListener('click', sessionAddition, false);

<div id='displayBreak'></div>
<p>Break Length</p>
<button type='button' id='minusButton'>minus</button>
<!--decreases the stored variable-->
<button type='button' id='plusButton'>plus</button>
<!--increses the stored variable-->
<p>Session Length</p>
<div id='displaySession'></div>
<button type='button' id='minusSession'>minus</button>
<!--decreases the stored variable-->
<button type='button' id='plusSession'>plus</button>
<!--increses the stored variable-->
<p>Session</p>
<div id='sessionCount'></div>

Answer 1

您的倒计时功能必须如下：

    function countdown() {
      var sessionData =  document.getElementById('sessionCount').textContent;
      sessionData--;
      document.getElementById('sessionCount').innerHTML = sessionData;
      setTimeout('countdown()', 1000);
}

您忘记更新“sessionCount”div上的变量。因此，您的倒计时没有更新。

基本JavaScript中的番茄钟计时器

1 个答案: